A clone of Trello using React as the frontend, express as the backend. The data is persisted in a mySQL database and the project is written in Typescript.
This trello clone has a hardcoded board which the lists are displayed in.
- Create a mySQL database
- Create the tables listed below
- Insert the board we use listed below
- Clone the repository
- Install packages listed below
- Setup .env listed below
DROP TABLE IF EXISTS trello_board
CREATE TABLE IF NOT EXISTS trello_board (
board_id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
board_name VARCHAR(50) NOT NULL,
PRIMARY KEY ( board_id )
);
DROP TABLE IF EXISTS trello_list
CREATE TABLE IF NOT EXISTS trello_list (
list_id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
board_id INTEGER UNSIGNED NOT NULL,
list_name VARCHAR(50) NOT NULL,
PRIMARY KEY ( list_id )
);
DROP TABLE IF EXISTS trello_card
CREATE TABLE IF NOT EXISTS trello_card (
card_id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
list_id INTEGER UNSIGNED NOT NULL,
board_id INTEGER UNSIGNED NOT NULL,
title VARCHAR(50) NOT NULL,
description VARCHAR(1000) NOT NULL,
PRIMARY KEY ( card_id )
);
INSERT INTO trello_board ( board_id, board_name ) VALUES ( 1, 'Trello Board');
For the server
- cd server
- npm install
- npm run build
For the client
- cd client
- npm install
From the server directory
Currently there are no tests for the frontend.
Running the server tests is performed from the server directory, run the following
npm run test
Start the backend
cd server
npm run dev
Start the front end
cd client
npm start
GET /api/board/:boardId Retrieves a board with all the lists and acrds POST /api/list Adds a list to a board
DELETE /api/list/:listId Deletes a list from a board
POST /api/card Adds a card to a list
PUT /api/card/:cardId Moves a card to a different list
DELETE /api/card/:cardId Deletes a card from a list