https://github.com/larrybarriosjr/tinel
A simple webshop that sells workshops. An assignment for a job application to Locastic.
https://github.com/larrybarriosjr/tinel
assignment jest job-application react react-router react-testing-library redux redux-toolkit typescript
Last synced: 3 months ago
JSON representation
A simple webshop that sells workshops. An assignment for a job application to Locastic.
- Host: GitHub
- URL: https://github.com/larrybarriosjr/tinel
- Owner: larrybarriosjr
- Created: 2021-06-19T10:51:15.000Z (about 5 years ago)
- Default Branch: develop
- Last Pushed: 2022-09-29T09:08:22.000Z (over 3 years ago)
- Last Synced: 2023-07-31T15:11:22.322Z (almost 3 years ago)
- Topics: assignment, jest, job-application, react, react-router, react-testing-library, redux, redux-toolkit, typescript
- Language: TypeScript
- Homepage: https://tinel.larrybarriosjr.com
- Size: 861 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Tinel Workshop**
A simple webshop that sells workshops. An assignment for a job application at Locastic.
## **Workflow**
### _ASSET SETUP_
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.
### _DEVELOPMENT SETUP_
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.
### _BRANCHING STRATEGY_
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.
### _FEATURE DEVELOPMENT_
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.
## **Technologies Used**
### _CLIENT_
- React
- TypeScript
- Redux/Redux Toolkit
- React Router
- Sass
- Formik/Yup
### _SERVER_
- JSON Server
### _TESTS_
- Jest
- React Testing Library
- Cypress
### _CONFIGS_
- ES Lint
- Prettier
- VS Code
- GitHub Actions
### _OTHER LIBRARIES_
- Day JS
- CLSX
- React Select
- React Datepicker
- React Hot Toast
- Redux Persist