https://github.com/sonatipek/vitamins-and-supplements-frontend
The modern and minimalist interface of Vitamins and Supplements has been created to reduce the cost of research time required when additional supplements are needed and to make it easier for users to adopt healthy living habits.
https://github.com/sonatipek/vitamins-and-supplements-frontend
living-habit minimalist-interface react sonatipek supplements tailwind tailwindcss vitamins vitamins-and-supplements vite vitejs
Last synced: 2 months ago
JSON representation
The modern and minimalist interface of Vitamins and Supplements has been created to reduce the cost of research time required when additional supplements are needed and to make it easier for users to adopt healthy living habits.
- Host: GitHub
- URL: https://github.com/sonatipek/vitamins-and-supplements-frontend
- Owner: sonatipek
- License: mit
- Created: 2024-02-04T23:41:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-17T00:17:50.000Z (12 months ago)
- Last Synced: 2025-01-29T17:44:18.369Z (4 months ago)
- Topics: living-habit, minimalist-interface, react, sonatipek, supplements, tailwind, tailwindcss, vitamins, vitamins-and-supplements, vite, vitejs
- Language: JavaScript
- Homepage: https://vitamins-supplements.vercel.app/
- Size: 312 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://choosealicense.com/licenses/mit/)
# Vitamins and Supplements
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](/README.md#related-project)
_Does not contain recommendations for use, I recommend that you consult your doctor in any case_
## What I Learned
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.
## Features
- 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
## Related Project
You can access the API I developed with this interface from the link below:
[Vitamins & Supplements](https://github.com/sonatipek/vitamins-and-supplements-api)
## Tech Stack
## Run Locally
1. Clone the project
```bash
git clone https://github.com/sonatipek/vitamins-and-supplements-frontend.git
```
2. Go to the project directory
```bash
cd vitamins-and-supplements-frontend
```
3. Install dependencies
```bash
yarn install
'or'
npm install
```
4. Start the development server
```bash
yarn dev
'or'
npm run dev
```
## Environment Variables
To run this project, you will need to add the following environment variables to your .env file
`VITE_API_TOKEN`
## Feedback
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]`.