tmtodos.me

Full stack todo app

• This project consists of 2 areas:
  • tm-web - Next.js frontend
  • tm-server - Node/GraphQL backend

Tech stack

General

• Lerna
• AWS

Frontend

• React
• Next
• tailwind
• Emotion
• Polished
• React-icons
• Typescript
• Vercel
• Graphql-Codegen
• Cypress

Backend

• Graphql
• S3
• TypeORM
• DataLoader
• Docker
• Dokku
• Redis
• PostgreSQL

Features

• CRUD todos
• CRUD user
• upload profile images (s3)

Build

Getting started with local development

Prerequisites

• This project targets Node V14. Ensure you're using Node V14 by using something such as NVM.
• Node + NPM installed.
• Docker (responsible for running Redis & Postgres)
• run npm ci && npm run bootstrap in the root of the project to install dependencies

Backend:

• Ensure ports 5432 & 6479 are free
• copy the .env.example to .env (cp .env.example .env).
• Fill out the .env file with your own values
• To start redis & the postgres DB: docker-compose up
• to start the backend: cd src/tm-server && npm run watch. This will transpile Typescript down to common JS. Run npm run dev to start the backend server.

Frontend:

• copy the .env.example to .env.local. cp .env.example .env.local.
• run npm run dev to start the frontend

Running backend Migrations

• The backend contains 2 commands which are responsible for dealing with migrations.
• The first one is responsible for generating a migration based on changes made to the entities folder. typeorm migration:generate -n <NAME>.
• The second one is responsible for running the generated migrations. typeorm migration:run

Deployment

• Backend deployment is done via Dokku & hosted on AWS. Frontend deployment is done via Vercel. Take a look at my blog post if you're interested how I deployed this project