Feige Todos

This project is a dead simple Todolist app for demonstration purpose. It was built with Angular version 9.1.7.

Features checklist

✅ Built Mock API with json-server from the ground up, by myself: Heroku.
✅ I chose Angular because I'm being familiar with it. Vue or React are all fine but I've not practiced with them for two years, that would be high risk if I chose them.
✅ User can create a task
✅ User can view all their current tasks
✅ User can update a task
✅ User can delete a task
✅ The page is mobile-responsive (in my perspective)
✅ Fetched from a mock REST API that returns an appropriate JSON format
✅ Using TypeScript: it's default for Angular project
✅ Hosting the front-end client using Heroku too.
✅ Using a state management: NgRx (based on redux)
❌ end-to-end testing frameworks: Sorry that I didn't have enough time for this. So I decided to spend time for manually testing and writing report. To be honest, I've written unit-test before (2 years ago), but most of the time I do not, due to the tight budget from previous companies.
❌ I did not use any CSS framework, there's no need for this simple project. Actually even with bigger project, I will choose not to use too.
✅ App design: I searched and picked a random design from Google, which is simple enough to implement.

To keep it simple and focus more on techniques, there are some limitations:

I came up with simple design
I did not implement some animations to make the app smoother.
I chose default <input type="date"> for date picker, which is not fully support in Safari.
Duedate (datepicker) doesn't have option to set it null, which means the duedate cannot be set unlimited.
Duedate is just for displaying purpose, there is no warning if the duedate is close to or pass the current date.
Free Heroku app does have a sleeping time if it's not being touched. So the first time you go to the app, it will be slow (to wake it up), then the speed will be much better.
There are a lot of ideas we can add/improve the features or UX to make it more usable, but it's not necessary for the demonstation purpose.

You can choose to use the already setup server, or build your own server:

1. Use the Feige Json Server

I've already setup the server, use the API endpoint here: https://feige-json-server.herokuapp.com/todos

GET     /todos
GET     /todos/{id}
POST    /todos
PUT     /todos
DELETE  /todos/{id}

2. Build your own server with json-server

Follow the guide here to build your own server: https://github.com/typicode/json-server

Make sure that you've already installed the Angular-CLI

Pull the project
run npm install or yarn install
run npm start or yarn start
If you wish to use the Feige's demo server, change the API_ENDPOINT in the /src/environments/environment.ts with the environment.prod.ts

Run yarn build to build the project with production mode. The build artifacts will be stored in the dist/ directory.