Note-App

• 

  This is the homepage of my app

• 

  This is the note app.

Inspiration

When I was looking for designs for web pages, I came across a beautiful note-app model which inspired me to create a note app myself with all the concepts that I have learned

What it does

It uses firebase for google authentication for each user sign-in. Once the user signs in to the web app the note app is displayed where the user can add, delete and view the number of notes in each category.

How we built it

I used react.js, redux for user persistence so that when the user is signed in the login page is not displayed and firestore to save the notes data and render it in the app. I also used CSS animations to make the project look cooler.

Challenges we ran into

The main challenge that I ran into was the time taken by useState to update its state. This one caused me errors for many days and finally, I found out that state won't update immediately. The other challenge was to retrieve the data in firestore and render it inside the app. As firebase was new to me, personally it was challenging to find how to fetch data from firestore.

Accomplishments that we're proud of

The best accomplishments were state persistence so that the notes data and the login data wont be lost when the user reloads the app and implementing redux to avoid passing props into all other components.

What we learned

I learned about react-redux and a lot about firebase and firestore and useEffect hooks which will surely be helpful for the projects which I will make in the future.

What's next for Note-App

To include toggle mode which makes the user experience much better.

Built With

• css3
• firebase
• html5
• react
• redux