Smart Saver is a web application that allows for automatic notification of users regarding specials on their favourite Woolworths products.
The motivation behind building this web application was to automate the tedious and repetitive task of checking whether Woolworths products are on special, using their website.
This is handy for products that are seldom on special, such as dog food, canned tuna and peanut butter etc. which can be bought in bulk to save money.
Rather than checking every few days, a user can just add multiple products at once and automatically receive a notification email whenever a product goes on special.
This project was bootstrapped with Create React App.
This website was built using:
- MongoDB Atlas for cloud database storage, Express.js, React.js and Node.js
- MongoDB Realm's serverless and trigger-based architecture for batch updating user product data as a CRON job
- Passport.js for session-based user authentication and backend API endpoint authorisation
- AWS CodePipeline, AWS CodeBuild, and AWS Elastic Beanstalk for a CI/CD pipeline and backend server deployment
- AWS Certificate Manager for enabling HTTPS for my Elastic Beanstalk server environment, allowing client requests to be encrypted between the frontend web server to the AWS application load balancer
- Netlify for frontend deployment
- Bootstrap 4 for CSS styling
- Docker Compose for local deployment
The build specification reference for AWS CodeBuild can be seen in buildspec.yml.
The backend uses a simple three-layer architecture, including controllers (Express routes), a service layer, and a data access layer (Mongoose ODM). This is to abide by the principle of separation of concerns, and to avoid putting business logic inside the controllers.
The directory structure can be seen below:
.
├── config # Environment variables
├── controllers # Express Route controllers
│ ├── middlewares # Express middlewares (e.g. authentication middleware)
│ └── routes # Routes for API endpoints
├── jobs # CRON jobs
├── loaders # Split the server startup process into modules
├── models # MongoDB database models
├── realm # MongoDB Realm serverless functions
├── services # Service classes that contain business logic
└── server.js # Application entry point
The backend API is configured to use HTTPS. The steps below indicate how to set up HTTPS for an AWS Elastic Beanstalk environment (mostly for my reminder, so I don't forget 😛).
- Get an SSL certificate for the backend API server domain from AWS Certificate Manager (or Let's Encrypt)
- Need to set MX or forward email from *@SERVER_DOMAIN to your personal email
- Create an application load balancer with a HTTPS listener on port 443 using the certificate (leave security groups as is), using the default SSL
ELBSecurityPolicy - Don't forget to set environment variables in the AWS Elastic Beanstalk environment!
The repository contains a docker-compose.yml file for local deployment on any operating system. First, you need to create .env files in both the backend and frontend directories.
A sample .env file for backend:
PORT=5000
MONGODB_URI=mongodb://mongodb0.example.com:27017
EMAIL=example@gmail.com
PASSWORD=supersecretpassword
ORIGIN=http://localhost:3000
SECRET=supersecretkey
NODE_ENV=development
A sample .env file for frontend:
REACT_APP_SERVER=http://localhost:5000
To run the application, ensure you have Docker and Docker Compose installed. Then, run:
$ docker-compose up --build
- More emphasis on responsive design to better support mobile devices
- Add a cart system so users can see how much they can potentially save when purchasing on-special products
- Opt-in settings to turn off notification emails, and the ability to explicitly set personalised notification times
MIT © Emmanuel Macario
Made by Emmanuel Macario