anjuli08/lofi-env

Lofi and pixel-art themed virtual study environment, built using MERN stack

Lofi-env

About The Project

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

Features

• 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

Technologies

Frontend:

• TypeScript
• React.js
• Redux Toolkit
• Styled Components (CSS-in-JS)

Backend:

• TypeScript
• Node.js
• Express.js
• MongoDB

Design and Architecture

Architecture

The project implements the MERN (MongoDB, Express, React, Node.JS) stack.

Data Model

The data model implements a referenced model where related documents are linked to a user with userId.

Testing & Deployment

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.