github.com/nataliagalan/saicophonic-medicine-frontend ↗
An animated time-lapse of how nataliagalan/saicophonic-medicine-frontend was built, commit by commit.
Open this visualization on its own page →
Contributors
2
Lines of Code
890
From
2020-10-19
To
2020-12-17
About nataliagalan/saicophonic-medicine-frontend
Saicophonic Medicine is a web application for building and managing a curated collection of live music videos paired with lyrics and custom timestamps. Users can click directly on timestamps to jump to specific moments in videos, making it easy to navigate to particular sections of performances. The platform includes both admin functionality for uploading and organizing content and visitor features for exploring and discovering music.
The frontend is built with React, Redux, and React Hooks to manage application state and scalability. It incorporates several performance and usability optimizations including an 88.5% load time reduction through lazy loading, Elasticsearch-powered search with autocomplete functionality, and responsive design that toggles between list and grid views. The interface features drag-and-drop lyrics input with dynamic form fields and keyboard accessibility, allowing admins to manage multiple input fields effortlessly.
The application uses a PostgreSQL relational database backend with a Rails RESTful API, secured with JSON Web Tokens and bcrypt password encryption. Styling is implemented with React-Bootstrap, Sass, and custom CSS3 to create a polished, accessible user experience across desktop and mobile devices.