🔥Synthesizer API Explorer!🔥 🔥Synthesizer API repo🔥
This frontend is built upon my Synthesizer API. The project aim's to offer an appealing and visual scrolling experience while exploring the history of synthesizers. On a vertical timeline synthesizers are displayed sorted by year of production. When a manufacturers is queried only synths from that manufacturers are displayed. Users can contribute by suggesting new synthesizers. A login system is used to make admins able to decline or accept these suggestions and add them to the collection.
On the main page images pop-up from both sides with CSS Animations. When the limit has been reached of the fetched synths a new batch is fetched on observing the last element. To make this happen I utilized Intersection Observer. There was also a need for a reference to the an actual DOM element, therfore UseRef was explored (together with UseCallback).
Making this frontend gave me the chance of exploring more tools in my styling toolbox. Since I am working in React, Styled Components seemed fitting. It blends in so well with React's inner working and is nice to combine with Sass.
Validation was done with Yup. It aim's to deliver meaningful feedback to the client when an mistake occurs. Also validated in front and backend: multipart/form-data & attachments.
To store the JWT token, aquired from a succesfull admin registration and login, UseContext is used.
To be able to get only the new years stick to the top when scrolling through the synthesizer this construction is used.
| CSS Animation | fetching data | React Hook Form | custom Hooks |
| validation | error handling | Intersection Observer ⭐ | Styled Components |
| UseCallback ⭐ | UseRef ⭐ | lazy loading | pagination |
| Yup | handling file upload | styling file upload | multipart/form-data ⭐ |
| Multer ⭐ | creating svg's | UseContext | autocomplete |
| Axios cancel token | prevState ⭐ | sticky (advanced) | Playwright |
| frontend JWT |
⭐ New technologies learned in this project
-
As a User I want to be able to be able to see synthesizers, so I can satisfy my needs
-
As a User I want to be able to be able to see synthesizers sorted by the year the are produced, so I can get a feeling for their history
-
As a User I want to be able to be able to query all synthesizers from one specific manufacturers, so I can only look for 'Roland' synthesizers
-
As a User I want to be able to be able to know what manufacturers I can choose from, so I get the data I'm looking for
-
As a User I want to be able to contribute to the collection, so I can help make this the biggest directory of synthesizers out there
-
As a User I want to be able to know what is not allowed when suggesting a new synthesizer, so I can do it in a swift manner
-
As Myself I want to be able to judge the suggested synthesizer, so I can decide which one's will be added to the collection
-
As a User I want to be able to filter and sort synthesizers on options other then year they are produced
- Checkout the wireframes made for the Synthesizer Directory.
...