Trendify is an ecommerce web application that enables users from anywhere in the world to effortlessly purchase their desired products. With an extensive range of products across various categories, Trendify offers a seamless shopping experience. Whether it's fashion, electronics, home decor, or any other item, users can easily find and add their desired products to the cart. The intuitive interface ensures a smooth checkout process, and with just two clicks, users can place an order and have their products delivered right to their doorstep. Trendify combines convenience, variety, and reliability to make online shopping a breeze for customers.
This app utilizes the latest web technologies, delivering a seamless user experience. Leveraging these advancements ensures speed, scalability, and an immersive interface. Users can enjoy fast load times, smooth navigation, and a responsive design that adapts to various devices. With a focus on optimizing performance and scalability.
During the project, one of the challenges I encountered was efficiently updating data and managing API calls.
The main reason of the project is to give users an awesome experience and offer them some really cool features. Important thing is,users should feel that using this app is effortless and enjoyable.
- Responsive and user-friendly interface
- Highly performant, efficient, and scalable
- Dark and light mode toggle for personalized experience
- Convenient registration and login with Google authentication
- Optimistic updates for seamless user interactions
- Secure and seamless Stripe payment integration
- Form validation using Zod for enhanced data integrity
- User page showcasing ordered products for easy reference
Install StripeApi with npm (If you don't want checkout features in the app you can skip this part) https://github.com/kaifkalanthar/StripeApi/ clone this repo in your local machine and run this command
npm iAfter installing npm package add .env file in root directory
STRIPE_KEY = 'YOUR_STRIPE_SECRET_KEY'
# Eg : sk_test_23ASDy6SAKqJkQVx5DZ5s2jXMtWpBJpOdIi47UbNJMjtHZ9UGB5qcMWwHi4LRoXTaa3TGDQ0BoVJXF8k4C99kXKNh00UgURUi29
CLIENT_URL = 'YOUR_CLIENT_URL'
#Eg : http://localhost:5173/
Run the project using
nodemon
[or]
npm start
Now, Installation of the app(Website) https://github.com/kaifkalanthar/Eshop clone the repo in your local machine.
To run this project, you will need to add the following environment variables to your .env file
VITE_API_KEY = YOUR_API_KEY
VITE_AUTH_DOMAIN = YOUR_AUTH_DOMAIN
VITE_PROJECT_ID = YOUR_PROJECT_ID
VITE_STORAGE_BUCKET = YOUR_STORAGE_BUCKET
VITE_MESSAGING_SENDER_ID = YOUR_MESSAGING_SENDER_ID
VITE_APP_ID = YOUR_APP_ID
VITE_FIREBASE_URL = YOUR_FIREBASE_URL
# if you could not find firebase url in SDK setup and configuration you just go to realtime database,copy the url and paste in YOUR_FIREBASE_URL
go to /src/config/firebase-config.ts
import { initializeApp } from "firebase/app";
import { GoogleAuthProvider, getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: import.meta.env.VITE_API_KEY,
authDomain: import.meta.env.VITE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_PROJECT_ID,
storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_ID,
};
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();
Replace your config values in firebaseConfig (Before setup firebase project in firebase, if you don't know how to create firebase config refer this video https://www.youtube.com/watch?v=7aZI0OB9Pew)
Use this command to install the dependencies
npm i
Use this command to run on browser
npm run dev
Use this command to build
npm run build
[If you like to deploy the site I suggest you to use Vercel for client side and Render for server side]
Client: React, TypeScript, Chakra-UI
Libraries: Zustand for state management, React Query, React Router, Zod, React hook forms
Server: Firebase, Node, Express
Demo Account Email : [email protected] Password : user#asyu
Home Page
Login Page
Product Page
Cart Page
Profile Page
Stripe Payment Page
- LinkedIn - https://www.linkedin.com/in/mhdkaif/
If you have any feedback or would like to share your thoughts, I would love to hear from you! Kindly send me a direct message on LinkedIn. Your feedback is valuable to me, and I appreciate your time in reaching out. Let's connect and keep the conversation going!