A simple webshop that sells workshops. An assignment for a job application at Locastic.
Using the design file given with the assignment, I created an svg for icons and logo similar to the file. I also created a custom logo for favicon and mobile app logos based on the original logo of the webshop. This adds completeness to the overall appearance of the site.
To make a consistent development environment throughout the developers, I set up configurations for code formatter and linter using Prettier and ES Lint. I also added ignore files to start the development server faster and to display autocomplete much quicker.
I used three branches: main, develop and feature.
I used the feature branch for adding a feature to the app. These features come from the stories given with the assignment. I labeled the features depending on the page the story is on. I added other features that are not part of the story but are otherwise important, such as initial configurations, styling, and setting up assets and APIs.
I used the develop branch to merge the completed features and act as a branch for ensuring minimal bug fixes before merging to main.
Finally, the main branch is used for the release of the product. Currently, there is only version 1.0.0.
I followed a TDD (Test-Driven Development) approach using Jest, React Testing Library, and Cypress for unit and integration testing. I created the tests from the story criteria and based my components on them. I also added automation when creating a pull request on develop branch to run the test first before merging.
I also followed a Mobile-First approach to ensure responsiveness throughout the most commonly used devices.
- React
- TypeScript
- Redux/Redux Toolkit
- React Router
- Sass
- Formik/Yup
- JSON Server
- Jest
- React Testing Library
- Cypress
- ES Lint
- Prettier
- VS Code
- GitHub Actions
- Day JS
- CLSX
- React Select
- React Datepicker
- React Hot Toast
- Redux Persist