Nature is full of surprises and keeps many things hidden from us! It's your chance to explore them and better understand our nature.
Hello, Hashnode 👋! I'm Shivam, and today I'm writing to introduce my project FactSea, which I created for the Hack-R-Play hackathon held by ReactPlay and sponsored by Nhost.
What is FactSea?
FactSea is a website that has a large number of facts about Nature. There are many things we may learn about nature, but we don't know about them all. FactSea enlightens you on natural facts that you may be unaware of. It is not a site where you will learn every single fact about nature; instead, it will show you uncommon, special, or unique facts. It also contains a small quiz which you can play and understand our nature more.
Inspiration
I created FactSea to familiarise people with understanding how great, unique, odd, strange, and fantastic our nature is.
Quick Look
FactSea is simple to use. It does not have any complexity feature or something in it. It just contains a simple Landing Page, when you first time land on it.
Landing Page:
So, it has the Explore button from where you can enter the world of facts. When you click on the explore button it will take you to the Sign in/ Sign up Page. To see all the facts and play the quiz game, you must sign in or on the website.
Log in Page
Just sign in with your details and you're good to go. After sign-in to the page, you will land on the Dashboard Page, which looks like this 👇
Dahboard Page:
This page contains two things firstly, The Quiz and The Facts buttons at the top of the screen. On clicking on the Facts button you'll land on the fact page, which contains many facts.👇
Facts Page:
You can explore the facts as you scroll down the page. And if you'll click on the Quiz Button then, you'll land on the quiz page where you can play a small quiz(related to nature) and know more about nature.
Quiz Page:
Here 👆, you can select the difficulty level and the number of questions you want, and after that, on clicking on get started button, the quiz will get started. At the end of the quiz, it will show you your total score.
After that, you can play a quiz again or you can go back to Dashboard as per your choice.
Note You'll get new and random questions every time you play a quiz.
Now as you'll scroll down the Dashboard page then, you'll see a button named Strange Image. On clicking on this button you'll land on this page. 👇
Strange Page:
This page contains strange images of nature. On this page, you'll see the most unique, unsolved, strangest images related to nature, and on hovering over the image, you can also read about that particular incident.
Now as you'll scroll down the Dashboard page a bit more, then you'll see some Featured Facts which are some most unique things about nature.
- At last at the top of the page, there is a Profile Button from where you can see your user name and email, and also you can log out from there.👇
So, that all are the features and routes of the project.
Tech Stack
I used React JS and Nhost to build this project.
Nhost
Nhost is the open-source GraphQL backend (Firebase Alternative) and a development platform. Nhost is doing for the backend, what Netlify and Vercel are doing for the front end. It provides a modern backend with the general building blocks required to build fantastic digital products. It has all the tools that we need to build a perfect Web-App. It
- has a graphql feature out of the box
- offers SQL database which is on top of Hasura
- gives you an authentication system and,
- serverless function to build your endpoint.
You can learn more about Nhost here
Frontend Parts
FactSea used some of the popular tools which are:
- Material UI & Styled Components - For building responsive UI components
- Redux Toolkit - For the state management throughout our app
- React Router - For Routing in our app
- Material Icons - For Icons
- For more, you can check out here
What did I learn?
I have previously built React-based apps and also worked with Firebase before but, it's the first time when I am going to use Nhost. Nhost was very new to me. I was so confused at the start about how to use authentication, Hasura, graphQL, etc. It took more than a week for me to understand Nhost.
The discord community of ReactPlay, the Hosts of the Hack R Play, and the documentation of Nhost helped me a lot. It was the first time me of using GraphQL and also Hasura(I never heard about Hasura before😅). But these 20 days are worth it. I didn't only learn about Nhost. I also learn about GraphQL, Databases, Serverless Functions, Redux, and many more. There are so many fun and learning things in this hackathon.
Upcoming Updates
There are still other features that I intend to add in the future, such as a part where users can search and get the most unusual things that have ever happened with our nature, something more along the categories.
Conclusion
I hope you enjoyed this article and a short tour of our project. I enjoyed building this project and learn a lot in this Hackathon. You can explore the project code here.
You can also connect with me through-