Git Product home page Git Product logo

pern-todo-demo's Introduction

PERN Stack TODO App

Purpose - Demonstrate a simple TODO full-stack application with a Postgres database, Node Express API backend, and React frontend for containerization in Docker

Description - This is a simple PERN stack application, a Todo List which performs CRUD operations on a single resource. It consists of a React front-end, back-end API using Node and Express, and persisting data in a Postresql database.

  • The front end in React is based off https://github.com/mdn/todo-react, which is just a React front-end that uses only mock data. Fetch API calls were added to connect it to a back-end
  • The back end is an Express server in Node.js which uses the Sequelize ORM to connect to the postgres database.
    • Note - Migration and Seed data files are supplied for the sequelize-cli, but are not yet configured to work in Docker

How to run locally:

Fork and clone the project repository

  • To fork the project to your personal Github, click the Fork button located at the top right of the project, then git clone <repo> from the forked repository.

Setting upstream remote (optional)

  • Link the local repository just created with the original you forked from
    • If new content is added to this repository, you can pull the new changes, but the remote 'origin' points to your forked version
    • Add another remote and call it 'upstream':
      • git remote add upstream https://github.com/PhillipWitkin/PERN-todo-demo
  • To fetch or pull changes, we tell git to look at the Github upstream remote (pointing here) instead of the origin remote (which points to your fork):
    • For git to try and merge changes, we use git pull <remote> <branch>:
      • git pull upstream main
    • In case there of a merge conflict, we can update all remote branches, but save merging for later using git fetch :
      • git fetch upstream

Switch to the 'dockerized' branch

  • Navigate to the root of your local repository
  • Checkout to the dockerized branch by running
    • git checkout dockerized

Use Docker Compose to build and start the application

  • From the project root folder, run
    • docker-compose up
    • This will build our Docker images, and start each service running in a seperate Docker container
  • Four containerized services are specfied in the docker-compose.yaml file:
    • todo-db - running our instance of postgres
    • pgadmin - running pgAdmin, a postgres workbench tool which monitors todo-db
    • todo-api - running the Express API backend server
    • todo-ui - runnng the Node server for React contents
  • The database will be automatially created with a Tasks table defined, and data seeded
  • The services will now be running in Docker, but can be reached via browser as if it were running natively

pern-todo-demo's People

Contributors

phillipwitkin 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.