Get It Donzo

Get it donzo bozo
Explore the docs »

Table of Contents

1. About The Project
   • Built With
   • Endpoints
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap

About The Project

This todo-list application is the take-home assignment for the Slush Junior Web Developer position. It was developed using the PERN stack (PostgreSQL, Express, React, and Node) and deployed to Render (https://get-it-donzo.onrender.com/). This is a fairly simple PERN stack application because the scope of the assignment is a 12-hour-to-make web application.

The Node/Express backend is built using TypeScript. JavaScript is used for developing the React frontend. The database uses the postgres Docker image and the data migration/seed processes are handled by Knexjs. The web pages are styled using the PaperCSS framework. Finally, the database for the deployment is hosted using ElephantSQL.

(back to top)

Built With

• TypeScript: https://www.typescriptlang.org/
• PostgreSQL: https://www.postgresql.org/
• Express.js: https://expressjs.com/
• React.js: https://react.dev/
• Node.js: https://nodejs.org/en
• Docker: https://www.docker.com/
• PaperCSS: https://www.getpapercss.com/
• Knex.js: https://knexjs.org/
• ElephantSQL: https://www.elephantsql.com/

(back to top)

Endpoints

Request	Description
POST /api/login	User login
GET /api/todos	Get all to-do entries
GET /api/todos/:id	Get a specific to-do entry
POST /api/todos	Create a new to-do entry
PUT /api/todos/:id	Update a specific to-do entry
DELETE /api/todos/:id	Delete a specific to-do entry
GET /api/users	Get all users
GET /api/users/:id	Get a specific user
GET /api/users/:id/todos	Get all to-do entries of this user
POST /api/users	Create a new user
PUT /api/users/:id	Update a specific user
DELETE /api/users/:id	Delete a specific user

(back to top)

Getting Started

This is the instruction on how to set up and run this project locally.

Prerequisites

There are 2 ways to build and run this application: the first way is by using Docker (recommended) and the second way is to use npm. Go to the server subfolder of the project, create a .env file, and fill it according to the example file .env.example (Note: if you use Docker, you can fill in whatever credentials you prefer but you'll have to use real credentials from a running PostgreSQL database if you choose to use npm).

Installation

Using Docker

The first thing to do is to open Docker (install Docker if you don't already have it).

1. Build the Docker image. Note that every time you make a change, you will have to rebuild the Docker image again

   docker-compose build

2. Start the Docker container

   docker-compose up

3. Go to localhost:3000 to use the application

Using npm

1. Go to each directory server and client and install all the dependencies

   npm install

2. Go to the package.json of the client and remove the line '"proxy": "http://backend:7777"'
3. In each directory server and client, run

   npm start

(back to top)

Usage

I chose to build a to-do list application because it's so simple but also very useful to people. The user can sign up, log in, and use the application like a typical to-do list: they can create a to-do entry, mark it as done, and delete it.

(back to top)

Roadmap

This is the current roadmap for future developments.

• Implement testing.
• Implement better way to handle authentication (currently localStorage-based token)
• Convert the frontend from Javascript to Typescript
• Document the APIs using swagger
• Implement CI/CD pipeline
• Add more features to the application
  • Profile page
  • Habit tracker
  • Heat map

(back to top)