Supplement & Vitamins was created to fulfill a need due to the limited resources available in Turkish on the use of supplements and was therefore created in Turkish. The idea was to turn the valuable information in the video mentioned in the Resources & References section and the design-enriched infographics into a website that people can easily access.
The project aims to provide easy access to information for every individual who needs to use supplements. In particular, I have observed that beginner athletes often use supplements that they do not need or use unnecessary supplements as if they are necessary as a result of marketing campaigns. At this point, it was created to allow you to discover the supplements you may need for yourself, away from repetitive duplicate "marketing content" and content that praises supplements for profit.
For this interface I used the API that I wrote myself. To learn more about this related project you can go to this section: Related Project
Does not contain recommendations for use, I recommend that you consult your doctor in any case
Developing this project helped me gain experience with React, such as useEffect, React optimizations (React.memo, useMemo, useCallback), state management with Context API and working with RESTful APIs. This experience also includes Multi-Page Application with react-router and animation with Framer Motion and Tailwindcss.
On the back-end side, I gained skills in writing RESTful APIs, and it was also useful to understand how data is processed on the front-end side. Therefore, I can say that I have gained a comprehensive perspective on both front-end and back-end work during the project development process.
- Tab switching between Vitamins and Supplements
- Dark-light theme change using Context API
- Ability to filter vitamins and supplements by category
- Dynamic content with information from the service with RESTful API
- Simple interface supported by animations
- Basic CRUD (Create, Read, Update, Delete) operations for backend service.
- Debouncing Technique
You can access the API I developed with this interface from the link below:
Vitamins & Supplements
-
Clone the project
git clone https://github.com/sonatipek/vitamins-and-supplements-frontend.git
-
Go to the project directory
cd vitamins-and-supplements-frontend -
Install dependencies
yarn install 'or' npm install -
Start the development server
yarn dev 'or' npm run dev
To run this project, you will need to add the following environment variables to your .env file
VITE_API_TOKEN
Please don't hesitate to give me feedback on your reviews. I really care about this feedback and find it very valuable to improve myself.
You can send your feedback through the communication channels in my profile or [email protected].