Skip to content

ChloeM112/quick-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

========================================
  QUICK LIST - To-Do App
  By Chloe McKinney
========================================

WHAT THIS APP DOES
------------------
Quick List is a to-do list web application where users can:
  - Add new tasks by typing and clicking "Add Task"
  - View all saved tasks in a list
  - Mark tasks as complete using a checkbox
  - Delete tasks using the Delete button

All tasks are saved to a cloud database (MongoDB Atlas) so they
persist even after closing the browser.

TECH STACK
----------
  Frontend:  React (JavaScript library for building the UI)
  Backend:   Node.js + Express (server that handles requests)
  Database:  MongoDB Atlas (cloud database that stores tasks)

HOW TO RUN THE APP
------------------
You need two terminals open at the same time:

  TERMINAL 1 - Start the Backend:
    cd quick-list/backend
    node server.js
    (You should see: "Backend server is running on http://localhost:5001")

  TERMINAL 2 - Start the Frontend:
    cd quick-list/frontend
    npm start
    (The app will open automatically in your browser)

CRUD OPERATIONS
---------------
  C (Create) - User types a task and clicks "Add Task"
               → POST request sent to backend → saved to MongoDB

  R (Read)   - All tasks load automatically when the page opens
               → GET request sent to backend → data fetched from MongoDB

  U (Update) - User clicks the checkbox to mark a task complete
               → PUT request sent to backend → MongoDB record updated

  D (Delete) - User clicks the "Delete" button next to a task
               → DELETE request sent to backend → removed from MongoDB

PROJECT STRUCTURE
-----------------
  quick-list/
  ├── backend/
  │   ├── server.js        (Express server with all 4 API routes)
  │   ├── package.json     (backend dependencies)
  │   └── .env             (MongoDB connection string - keep private)
  ├── frontend/
  │   └── src/
  │       ├── App.js               (main component, manages all data)
  │       └── components/
  │           ├── TaskInput.js     (text box + Add button)
  │           ├── TaskList.js      (displays all tasks)
  │           └── TaskItem.js      (single task row with checkbox + delete)
  └── README.txt           (this file)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors