/notesapp

Notes: Node.js + React App

Primary LanguageJavaScriptMIT LicenseMIT

Notes App

This web app allows users to create, view, and delete personal notes. Notes are stored in a MongoDB database, which can be hosted locally or on MongoDB Atlas.

Demo

URL: https://notes.ext.io:3443

Tech Stack

Backend:

  • Node.js
  • Express.js
  • Mongoose

Frontend:

  • React
  • Material Design with dark mode and dynamic theme switching

Project Structure Decisions:

  • It is a simple project. I decided not to produce too many almost empty files. Entry points of the code is in the index.js for the server and in App.jsx for the UI.
  • I put a model in the server project into a separate file: models/note.js and routes to a separate file: routes/api.js.

Design Decisions:

  • Material UI was chosen for a clean design that many users recognize.
  • Dark mode was implemented for a better user experience.
  • Mongoose was chosen for schema-based data validation and simplicity.

Screenshot

Note App Screenshot

Usage

Build the React App:

cd ui

install modules:

npm install

build the app:

npm run build

Launch the Server:

You need MONGO_URI environment variable containg MongoDB connection string.

to run locally, in development mode:

cd server

install modules:

npm install

run the server:

npm start

Open http://localhost:3000 to view it in your browser.

Development Log

  1. Set up the backend project (npm init). Express.js and Mongoose were chosen as well-known and simple solution. Added environment variables. The default collection name in MongoDB was test. Resolved by specifying dbName: notesapp.

  2. Developed middleware, routes, and a model. No issues.

  3. Created the frontend project (npm create vite@latest). Vite build tool was chosen for fast and lean development experience. Axios was added for straightforward requests. Added Material UI: tried a couple of Material Design packages as some were not nice.

  4. The textarea was ugly (incorrect height) after adding text. Fixed by resetting height to the default 3rem.

  5. Position of some elements was ugly (indented, not aligned with other elements): added row wrappers.

  6. Implemented Dark Theme. The background was not changing to dark. Fixed by directly switching styles for the body.

  7. Connected React. Added a static route to the backend. The path to index.html was incorrect: (../ui/dist) solved by changing to (../../ui/dist).

  8. Deployed on a server. No issues.