Sammeeey / mern-todo

fullstack todo app

Fullstack TodoList📝 (Frontend + Backend)

BACKEND

API

Todolist

• create
• get/display
• check off
• (change task)
• delete

FRONTEND

• inspired by webdev bootcamp by colt steele (paid)

Structure

• TodoList🧠
  • list todos
  • handle state
    • check off
    • delete
    • (edit)
  • hold data/state - format: list of todos
• Todo🎨
  • format: object (uuid, task(string), done(boolean))
• NewTodoForm🎨
  • create new todo

Project Structure

my-mern-app/
|-- backend/
|   |-- node_modules/   // Backend-specific dependencies
|   |-- src/            // Backend source code
|   |-- package.json    // Backend dependencies and scripts
|   |-- ...
|
|-- frontend/
|   |-- node_modules/   // Frontend-specific dependencies
|   |-- public/         // Public assets (e.g., HTML, images)
|   |-- src/            // Frontend source code
|   |-- package.json    // Frontend dependencies and scripts
|   |-- ...
|
|-- node_modules/       // Shared dependencies (if any)
|-- .git/               // Git repository configuration
|-- .gitignore          // Git ignore file
|-- package.json        // Project-level dependencies and scripts
|-- README.md           // Project documentation
|-- ...

Resources

todo list insipred by WebDev Bootcamp (paid)

backend setup inspired by MERN stack tutorial

deployment

• deployment to Vercel not working after trying a ton of resources for two days (all tutorials outdated - all using deprecated builds etc. in vercel.json + Vercel just not meant for monorepos/express APIs)
  • if really want to deploy MERN/Express API to Vercel - deploy Express API tut along with "Using Express.js with Vercel" (Vercel Docs) could work
• deploy Vite-MERN to Render (YouTube Tutorial)
  • deploy frontend folder as static page
    • root directory: frontend (bc frontend folder called frontend)
    • build command: npm run build
    • publish directory: dist (bc that's where vite publishes app after build)
  • deploy backend folder as web service
    • root directory: backend (bc backend folder called backend)
    • build command: npm install (to install node dependencies)
    • start command: npm start (defined as "node index.js" in package.json OR just use node index.js)
  • define correct environment variables for client & server (on Render)
    • backend
      • needs client URL to grant CORS access (& few more env variables)
      • needs MongoDB URL to interact with DB
      • define NODE_VERSION to tell Render which version to use (otherwise uses old version by default) - define node engine version in package.json
      • define NODE_ENV environment variable to use dev dependencies only during development (here only dotenv in development)
    • frontend
      • frontend needs server URL to make API request
  • grant backend service access to MongoDB (get render service IPs & allow them inside MongoDB)

takeaways

• forget about error handling initially! (takes a ton of time while making code unreadable)
• good practice to do frontend validation (eventually) but also takes a lot of time and redundant work in the beginning (defining additional schema on frontend - e.g. using react-hook-form)

TODO

• add functionality to all routes

  • eventually make update route really update - not just change done boolean

• move routes to controller file

• (implement router (navigation (& navbar)))

• connect backend & frontend

  • fetch db data from inside react and apply them to state using fetch()
  • how to implement correct backend URI during production (not just using proxy)? using CORS package? yes!
  • update todo creation form to save user input into db (via fetch()-POST request with JSON-string as body & content-type JSON to backend creation route)
    • (give error messages on failed forms)
  • dynamically update page (react to change) when new todo added
    • using useEffect
    • using context (potentially valuable for bigger projects)
  • implement CRUD in frontend using db
    • create
      • WHERE/HOW/WHEN TO SET NEW STATE AFTER UPDATING DATA IN DB?
    • read
      • read todos
      • (read single todo)
    • update
      • toggle
      • (eventually edit to update generally (also update task description))
        • toggle inside update function
    • delete

• (improve styling)

• hide error stack trace eventually

  • (display useful error messages to users)

• (move server route to /api/todos)

• (IMPROVE PAGE SPEED)

  • why page speed so slow? - normal in such basic react apps or just because I'm only using free plans (MongoDB Atlas & Render)?
  • (why does useeffect in todolist.jsx get triggered by todos (usestate) every few seconds? does todos get executed every few seconds to check state - so that it's generally a bad idea to make useEffect depending on it?)
    • does removing todos dependency solve infinite re-run of useeffect? - YES (no clue why - seems like re-render is considered as mount and something in the app triggers a re-render (probably the (react-hook-)form))

• remove localhost from cors list in index.js on backend

• remove vercel config file in case vercel not used

• add nodeversion file to root of backend define node engine version in package.json if that's what solves backend deployment issue on render

• document deployment (somehow)

• try cloudflare for deployment?!

nice to have

• store permanently
  • store in db
• collection of todolists
  • navigation
    • different routes for different todo lists
• personalized todo lists
  • user login/authentication/accounts