# Introducing FactSea: A Nature Fact Explorer

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](https://factsea.vercel.app/landing-page), which I created for the [Hack-R-Play](https://hustles.reactplay.io/hackrplay/2022/home) hackathon held by [ReactPlay](https://reactplay.io/) and sponsored by [Nhost](https://nhost.io/).

## 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: 

![Screenshot (151).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666379123834/cZGymtYmW.png align="left")

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

![Blue Red and Yellow typography Welcome To Graphic Design Facebook Cover (1600 × 840 px).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1666432953718/tESJ-ULb-.gif align="left")


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: 

![Screenshot (148).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666433234406/NBegfshpf.png align="left")

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: 

![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666434600884/l78A-ea4y.png align="left")

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: 


![Screenshot (158).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666434908099/zbYD16CaT.png align="left")


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.


![Screenshot (159).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666435177781/p71MPO_Py.png align="left")

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: 

![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666436289200/I6lJR03e_.png align="left")

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.


![Screenshot (150).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666437119476/oJfMuFVlK.png align="left")

- 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.👇


![Screenshot (149).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666437260010/7kMTZiFS6.png align="left")


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](https://nhost.io/) 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](https://docs.nhost.io/)


## 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](https://github.com/Shivam-Katare/FactSEA)


## 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](https://github.com/Shivam-Katare/FactSEA).

You can also connect with me through-

- [GitHub](https://github.com/Shivam-Katare)

- [Twitter](https://twitter.com/Shivamkatare_27)

- [LinkedIn](https://www.linkedin.com/in/shivam-katare/)