Code Monkey home page Code Monkey logo

todos-list's Introduction

TODOs List

Hey, Leave a ๐ŸŒŸ to this repo.

This is a small, full stack project using

  • Postgres
  • ExpressJS
  • ReactJS
  • NodeJS

image

From using the YouTube Course by freeCodeCamp.org

Learn the PERN stack in this full tutorial course for beginners. The PERN stack consists of PostgreSQL, Express, React, and Node.js. Learn how to combine these technologies to build a full-stack web application!

This is a CRUD application.

In this application you can create a Todo, Read Todo list to display the todos, Update a Todo by editing it and Delete a Todo.

image

Concepts learned from the course -

  • Drawing and Understanding overview diagrams. (ER diagrams.)
  • Making a npm project and installing required dependencies.
    1. ExpressJS 4.18.3
    2. Nodemon 3.1.0
    3. pg 8.11.3
    4. cors 2,8,5
  • Building the Server side ExpressJS App.

  • Starting a server using ExpressJS.
  • Creating a DB and Table in Postgres at localhost.
  • Connect postgres DB to the server.
  • Making endpoints -
    • post endpoint for inserting data in the DB.
    • get endpoints for retreving data from the DB.
    • put endpoints for updating data in the DB.
    • delete endpoint for deleting specifc rows in the DB.
  • Restful api overview.
  • Setting up client side ReactJS app powered by VITE.
  • Building the client side ReactJS App.

  • Create functions using fetch api method = POST.
  • Read functions using fetch api.
  • Delete functions using fetch api method = DELETE.
  • Created edit modal.
  • Edit function using fetch api method = PUT.

This was a Interesting project to build!

If you want to try it out.

Softwares required are -

  1. Postgresql
  2. Node.js

Steps to try it out.

  1. Clone this repository.
  2. Open it in any IDE.
  3. Change directory to the Server folder and run this CLI command.
npm install express
npm install nodemon
npm install pg
npm install cors

//to run server
npm run server
  1. Open another terminal, Change directory to Client folder and run this CLI command.
npm install vite

//to run frontend
npm run dev
  1. Now start the Postgresql Server using
> psql -U user-name
  1. The project is up and running with ExpressJS on Server side, ReactJS on Client side and PostgreSQL Database.
  2. Now got to the URL console logged on the client terminal. which is http://localhost:3000.

PORTS

Server port is 5000 and client port is 3000.

Though if you change the Postgresql port while installation then you need to specify that port in the DB.js file (./Server/db.js). Also you will need to specify the username and password of your postgresql server.

Run the database.sql commands to create a database and table inside it.

PREVIEW - Landing page todolist

todos-list's People

Contributors

prathmesh-ka-github avatar

Stargazers

 avatar Bhakti Bhatt avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.