A task management web-application for NUS CVWO Holiday Assigment.
Name: Tan Zong Zhi, Shaun (A0235143N)
Deployed at: https://tododex.herokuapp.com/
- Yarn
- NodeJS 17
- Ruby 3.0.3
- SQLite3 (for Ruby on Rails database)
I've included a setup script in the root package.json
for easy setup. Just run setup
, then start
to start development server.
The app will be accessible at http://localhost:3002
- Port 3000 is the REST API backend
- Port 3001 is the raw NodeJS frontend
- Port 3002 is the proxy that routes "/api" requests to Port 3000
and any other paths to Port 3001
git clone https://github.com/EvitanRelta/cvwo-holiday-assignment.git [REPO_DIR]
cd [REPO_DIR]
yarn run setup
yarn start
# App accessible at http://localhost:3002
The build
script does both the setup & build. The built static app can then be served via serve
script.
git clone https://github.com/EvitanRelta/cvwo-holiday-assignment.git [REPO_DIR]
cd [REPO_DIR]
yarn run build
yarn run serve
# App accessible at http://localhost:3002
Deploying both back & frontend to 1 Heroku dyno is really tricky. Heroku doesn't allow SQLite3, and have troubles detecting that the app requires BOTH NodeJS + Ruby.
The heroku-deploy
branch has the necessary changes. You'll need the Heroku CLI
for the below steps:
git clone https://github.com/EvitanRelta/cvwo-holiday-assignment.git [REPO_DIR]
cd [REPO_DIR]
# Setting up Heroku
# You'll need to create a Heroku app on their website and
# replace [YOUR_HEROKU_APP_NAME] with your app's name.
heroku git:remote -a [YOUR_HEROKU_APP_NAME]
heroku buildpacks:add -i 1 heroku/nodejs
heroku buildpacks:add -i 2 heroku/ruby
heroku addons:create heroku-postgresql:hobby-dev
# Pushing "heroku-deploy" branch to Heroku
git push heroku heroku-deploy:master
# Heroku doesn't seem to load Ruby when building, thus
# migration can only be done after pushing to Heroku.
heroku run "cd backend && rake db:migrate db:seed"
To add new tasks/categories/tags, click on the +
circle icon on bottom right:
To edit tasks and categories, just double click them.
Alternatively for tasks, you can click on the task and it will show the Add Tag
, Edit
and Delete
buttons:
The paragraphs below is included in the final writeup pdf.
I started out with only a little experience in React
and git
.
During the development of this app, I learnt and used:
- Git
- Ruby on Rails (with Gem –
devise_token_auth
) - React
(with Component Library –
MUI
) - Redux (with Middleware –
Redux Thunk
)
along with some tools for testing / prototyping:
When something goes wrong in the backend,
it was hard to find the correct backend commit to git checkout
to when they're all sandwiched between frontend commits.
I had to redo my backend twice due to incompatibilities between the latest versions of Rails
, Ruby
and the Rails gem – devise
.
Rails 7.0.0
incompatible withRuby 3.1.0
(rails/rails#43998)Rails 7.0.0
API-only App incompatible withDevise 4.8.1
(heartcombo/devise#5443)
Moreover, using the latest versions meant a lot of older online tutorials were too outdated to follow.
- Rails gem
simple_token_authentication
mentioned in a YouTube Rails API Tutorial didn't supportRails 7
(gonzalo-bulnes/simple_token_authentication#385)
I tried creating the React
frontend from scratch via yarn add react react-dom
, before realising I needed a bundler like Webpack
.
Then I spend an entire day configuring Webpack
with the required loaders and plugins (eg. css-loader
, html-webpack-plugin
),
failing to get it working, and got frustrated.
Before finally, starting over with yarn create react-app
.
It’s my first time using Typescript, and coming from a mostly Javascript (dynamically typed) background, it was initially quite hard to transition and get used to.
But by the end, I found it really helpful, especially when renaming and changing functions. It shows me where/how things break immediately when I make a radical change, rather than having to find out 5 commits later.
It also helped a lot how Typescript shows me the parameter types that libraries expect me to give, rather than having to check the documentation every 10s.
Definitely a lot of boilerplate for simple things. But it’s nice to not have to keep lifting the state up, and end up with tons of props on the container component.
Rails is by far the most difficult of all the tools to learn. Sometimes, documentations (especially ones geared towards beginners) are rather lacking. Sometimes Rails names their variables/files in camelCase, other times in hyphen-case. Also, “rails db:reset” doesn't work on Windows. (rails/rails#31589) Coupled with various bugs and incompatibility between the latest versions of Ruby, Rails and its gem – Devise, it was really difficult for me to grasp.