An assignment that was given during one of my software engineering courses. I thought it was a good practice exercise for a CRUD app and liked the concepts of "Tokimons". This was derived from my earlier iteration of it using only server side rendering with EJS and Express.
Link to app: https://mern-tokimons.herokuapp.com/
- Add a Tokimon to the database
- Display all your Tokimons
- Show information about a specific Tokimon
- Update a Tokimon's information
- Delete a Tokimon
- User login with JWTs (access and refresh tokens)
- Match a Tokimon's highest attribute with a color
- Display a chart of a Tokimon's attributes
- Search for Tokimons with names
This app was deployed via Docker and Heroku. The React app was bundled up and the index.html file is being served by the Express server. To setup up and deploy the app:
cd server
# Create production build
npm run build:prod
# Build docker image
docker build -t tokimons-app .
# Login to container registry
heroku container:login
# Create a Heroku app
heroku create
# NOTE: Setup your env variables in your Heroku dashboard for the app
# Push to the container registry
heroku container:push web
# Deploy the container to your Heroku app
heroku container:release web
# Open it in your browser
heroku open- MongoDB - stores Tokimon and user information
- Express - backend framework
- React - frontend framework for a reactive SPA
- Node.js - runs the backend server
- Typescript - superset of JS that provides types
- JSON Web Tokens - "sessionless" auth with access and refresh tokens
- Chart.js - generates bar graphs of our Tokimon type levels
- Formik - frontend package that helps with validation
- React Bootstrap - frontend package that comes with pretty components
- Yup - simple validator that runs with Formik