In this repository, you will use build a full stack To Do app using React, Node/Express, and MySQL.

• Build a database.
• Build an API server.
• Create a front end.

Run yarn on root folder to install dependencies related to Express.

cd client and run yarn install dependencies related to React.

Create .env file in project directory and add

DB_NAME=todos
DB_PASS=YOUR_PASSWORD

(replace YOUR_PASSWORD with your actual password)

Alternatively, you can rename the provided .env.example file to .env.

Type mysql -u root -p to access the MySQL CLI using your password.

In the MySQL CLI, type create database todos; to create a database in MySQL.

Run the following in the MySQL CLI: ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'YOUR_PASSWORD'; (replace YOUR_PASSWORD with your actual password)

Run node model/database.js in your TERMINAL, in the root folder of your project (not your MySQL CLI! Open a new terminal window for this). This will create a table called 'items' in your database.

• Run yarn start in project directory to start the Express server on port 5000
• cd client and run yarn start to start client server in development mode with hot reloading in port 3000.
• Client is configured so all API calls will be proxied to port 5000 for a smoother development experience. Yay!
• You can test your client app in http://localhost:3000
• You can test your API in http://localhost:5000/api

• Explain what each line of code is doing.
  • Look at the docs and ask your instructor if you aren't sure!

Suggested Process:

• Try and write the correct query in mysql.
• Use that query to finish the endpoint in routes/api.js.
• Test your endpoint using Postman.

To Do:

• Use Postman to confirm that you have completed these correctly
• GET /api/todos should retrieve all resources.
  • This route is almost complete!
• POST /api/todos should create a new resource.
  • To test that your query is correct, check to see if your new resource exists using mysql.
  • To test your route, use Postman to see if GET api/todos returns your new resources.
• PUT /api/todos/:id should replace a resource.
  • To test that your query is correct, check to see if your updated resource exists using mysql.
  • To test your route, use Postman to see if GET api/todos includes your updated resources.
• DELETE /api/todos/:id should delete a resource.
  • To test that your query is correct, check to see if your resource was deleted using mysql.
  • To test your route, use Postman to see if GET api/todos does not include your new resources.

• Spend time reviewing the existing code in client/src/App.js.
• Finish populating this.state.tasks from the API call in componentDidMount.
  • Read about the componentDidMount method in the React Docs
• Then, add a list of tasks to the DOM. Each task should have the following:
  • The text of the task.
  • A strike through (using CSS) if the task is complete.
  • Two buttons:
    • One button to mark the task complete (this should call the updateTask method)
    • One button to delete the task (this should call the deleteTask method)
• Finish the updateTask method so it calls the server.
• Finish the deleteTask method so it calls the server.
• Add styling.

• MySQL Cheat Sheet
• MySQL
• Fetch
• Promises
• React Documentation

This is a student project that was created at CodeOp, a full stack development bootcamp in Barcelona.