Nightly Notes (React)

A notes application, originally built with Vue, completely rebuilt using React!

Screenshot -

Mobile screenshots -

Made using -

• React + Typescript
• Sass / SCSS
• Redux Toolkit
• React Router
• Icon components custom-made (using icons in SVG format from Material Icons and converting them into JSX components using SVG to JSX)
• No additional libraries used

Notes -

A few months before beginning this project, I had built a highly functional and well-designed notes application using Vue. I wanted to utilize my newly acquired React skills by building a similarly complex application. Instead of searching for a new project idea, I decided to recreate the Vue notes app using React.

Recreating the app allowed me to reuse its existing design and styles, and focus solely on developing the app's logic and structure using React. Additionally, it provided me with the opportunity to compare React and Vue firsthand and understand the similarities and differences between the two frameworks. Through this project, I was able to gain a deeper understanding of frontend frameworks and libraries as a whole.

As my introduction to React, this project was an incredibly valuable learning experience. I was able to work on a comprehensive, frontend-focused, single-page application that made use of a modular architecture, complete with various components. Furthermore, I was able to gain hands-on experience with TypeScript and implement state management using Redux which provided me with a solid grasp of these technologies and how they can be effectively utilized in a real-world scenario.

View the design progression of the project here.

How to run in local server -

• Clone the respository
• npm install - To install project dependencies
• npm start - To start the development server