https://github.com/yusafosei-bonsu/mern-based-todo-list

A to-do list created using the MERN stack
https://github.com/yusafosei-bonsu/mern-based-todo-list

css3 express-js html5 jsx mern-stack mongodb node-js reactjs

Last synced: about 1 month ago
JSON representation

A to-do list created using the MERN stack

• Host: GitHub
• URL: https://github.com/yusafosei-bonsu/mern-based-todo-list
• Owner: YusafOsei-Bonsu
• Created: 2020-06-08T12:02:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T01:18:23.000Z (about 2 years ago)
• Last Synced: 2023-03-02T14:41:34.968Z (almost 2 years ago)
• Topics: css3, express-js, html5, jsx, mern-stack, mongodb, node-js, reactjs
• Language: JavaScript
• Size: 542 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This project focuses on the development of a MERN-based to-do list.

## Technologies used

- MongoDB

- Express

- React

- Node.js

## What Did I Do?

First, I created the front-end, which consisted of three main components: `CreateTodo.jsx`, `EditTodo.jsx` & `TodoList.jsx`; the front-end primarily involved React (i.e. JSX and HTML/CSS). The `CreateTodo.jsx` creates and inserts a new to-do task into the database. Next, `EditTodo.jsx` modifies an existing to-do task inside the database. Finally, `TodoList.jsx` displays all to-do tasks from the database. Moving on to the back-end, it was set-up using Express/Node.js and MongoDB; the former was used for server routing to insert and retrieve data to and from the MongoDB database, respectively. MongoDB hosted the local database that contained the to-do tasks.

To run the MERN application, perform the following steps:

1. `cd` into the backend directory and subsequently enter `& "C:\Program Files\MongoDB\Server\4.2\bin\mongod.exe" --dbpath "./data/db"` to run the MongoDB server and set the data directory.

2. Next, I ran the NodeJS/Express server by entering `nodemon server.js` into the terminal.

3. Afterwards, I ran the React.js application by entering `npm start` in the terminal.

## What Did I Learn?

- I had no knowledge on how to set-up MongoDB on PowerShell. Fortunately from online sources, I learn' how to.. .

  - Run the MongoDB server & set the data directory by entering `& "C:\Program Files\MongoDB\Server\4.2\bin\mongod.exe" --dbpath "./data/db"`.

  - Open Mongo Shell using `& "C:\Program Files\MongoDB\Server\4.2\bin\mongo.exe"`.