Lo-fi and pixel-art themed virtual study environment, equipped with an editable lofi radio, timer, to-do list and relaxing sound effects. This project was essentially born out of my desire for an all-in-one space for all my study needs throughout university 🎓
Check out the web application at: https://lofi-env.fly.dev/
User registeration and changing background colour
Main features showcase
- User authorisation & authentication
- Simple timer
- Customisable playlist that allows users to paste in their own youtube links to listen to
- Controllable radio that plays directly from the playlist
- To-do list that allows users to input tasks and mark tasks as done
- Customisable background color via an interactive color picker
- Adjustable sound effects that allows users to craft their own ambient sounds
- CRUD operations on all features
Frontend:
- TypeScript
- React.js
- Redux Toolkit
- Styled Components (CSS-in-JS)
Backend:
- TypeScript
- Node.js
- Express.js
- MongoDB
The project implements the MERN (MongoDB, Express, React, Node.JS) stack.
The data model implements a referenced model where related documents are linked to a user with userId.
Tests for backend APIs are written using the Jest library and automated as part of the build step of the CI/CD pipeline.
The web application is automatically deployed with Fly.io as part of the deploy step of the CI/CD pipeline.