8 |
13 |
*/}
14 |
29 | {userData ? (
30 |
60 |
31 |
56 | ) : (
57 | Profile
32 |
33 |
55 |
34 | 
39 |
40 |
41 |
54 |
42 |
45 | Name :
43 |{userData.name}
44 |
46 |
50 | Email :
47 | 48 |{userData.email}
49 |
51 | Edit Profile
52 |
53 | 
4 | 
5 | 
6 | 
7 |
8 |
9 | Genkart is a sophisticated e-commerce platform designed to demonstrate a wide range of web development skills. Unlike traditional e-commerce sites, Genkart intentionally omits payment and "Buy Now" options, focusing instead on the user experience, product management, and robust backend functionality. The project is built using cutting-edge technologies and frameworks to ensure scalability, performance, and maintainability.
10 |
11 | ### Tech Stack Overview:
12 |
13 | Frontend: Built with Next.js, a powerful React-based framework that supports server-side rendering and static site generation, enhancing both performance and SEO.
14 |
15 | Backend: Powered by Node.js and Express.js, providing a flexible and efficient environment for handling API requests and managing server-side logic.
16 |
17 | Database: Utilizes MongoDB, a NoSQL database, for storing product information, user data, and other critical information. The schema-less nature of MongoDB allows for rapid development and flexibility in data management.
18 |
19 | Image Management: Cloudinary is integrated for efficient image storage and delivery, offering responsive images and optimized media assets across the platform.
20 |
21 | Styling: The user interface is styled with Tailwind CSS and Material UI, combining the utility-first approach of Tailwind with the component-rich Material UI to create a visually appealing and responsive design. Material Tailwind further enhances the design with additional UI components.
22 |
23 | ### Key Features:
24 |
25 | Authentication & Authorization:
26 |
27 | Secure user authentication and role-based authorization are implemented using JWT (JSON Web Tokens). This ensures that only authenticated users can access certain features, with secure token exchange managed via cookies.
28 | The platform supports user roles such as admin and customer, each with specific access levels and permissions.
29 |
30 | Product Management:
31 |
32 | Product Pages: Each product category, such as T-shirts and casual shirts, has dedicated pages. These pages dynamically display products pulled from the database, with detailed information and images stored via Cloudinary.
33 | Category Pages: Users can browse products by categories, which are organized to provide a seamless shopping experience.
34 | User Profile:
35 |
36 | The profile page allows users to manage their personal information, view their browsing history, and update account settings. It is a hub for user-specific interactions, designed to be intuitive and user-friendly.
37 |
38 | Admin Panel:
39 |
40 | The admin dashboard is a critical feature of Genkart, empowering administrators to perform CRUD (Create, Read, Update, Delete) operations on products, categories, and user accounts. This panel is designed with security in mind, ensuring that only authorized admins can make changes to the platform’s content.
41 |
42 | ### Project Objectives:
43 |
44 | Genkart is not just a showcase of products; it is a demonstration of full-stack web development skills. By integrating modern technologies and best practices, this project serves as a portfolio piece, illustrating the ability to build scalable, maintainable, and user-friendly applications. The project also highlights proficiency in handling complex authentication mechanisms, managing media assets efficiently, and designing responsive and interactive user interfaces.
45 |
46 | ### Potential Future Enhancements:
47 |
48 | Although the current version of Genkart does not include payment and "Buy Now" options, it is architected to easily integrate these features in the future. Possible enhancements include:
49 |
50 | Payment Gateway Integration: Adding secure payment processing with popular gateways like Razorpay or Stripe.
51 | Shopping Cart: Implementing a fully functional shopping cart to manage user selections.
52 | Order Management: Developing an order management system to track purchases and handle user orders efficiently.
53 |
54 | ## Technologies used ...
55 |
56 | this project is developed by using
57 |
58 | - Next js
59 | - Node js
60 | - Express js
61 | - MongoDB
62 | - Tailwind css
63 | - Cloudinary
64 | - Material UI
65 | - Material Tailwind
66 | etc...
67 |
68 | ## How to use
69 |
70 | ### requirements
71 |
72 | create a mongodb atlas account : https://www.mongodb.com/products/platform/atlas-database
73 |
74 | create a cloudinary account : https://cloudinary.com/
75 |
76 | use visual studio code editor : https://code.visualstudio.com/download
77 |
78 | intall git
79 | for windows : https://git-scm.com/download/win
80 | for mac : https://git-scm.com/download/mac
81 |
82 | install node js : https://nodejs.org/en/download/package-manager
83 |
84 | ### get code from github
85 |
86 | create a folder and open in visual studio code
87 |
88 | open new terminal in vs code then run below command
89 |
90 | ```bash
91 | git clone https://github.com/Sebe2k04/Genkart-Next-Node-Ecommerce-v2.git ./
92 | ```
93 |
94 | then provide env files provided below
95 |
96 | ### Environment Variables
97 |
98 | initially create a env file in root folder of next js - location (/client/.env)
99 |
100 | important note : you can provide jwt secret based on you wish but provide same secret value for client and server
101 |
102 | ```bash
103 |
104 | # backend url
105 | NEXT_PUBLIC_API='http://localhost:5000/api'
106 | # frontend url
107 | NEXT_PUBLIC_CLIENT_URL="http://localhost:5000/"
108 | # jwt secret for verify user - replace as per you wish -same as backend
109 | NEXT_PUBLIC_JWT_SECRET="adminfksnkzv"
110 | # jwt secret value for verify admin- replace as per you wish -same as backend
111 | NEXT_PUBLIC_JWT_USER_SECRET="usernsdbdskvn"
112 | NEXT_PUBLIC_NODE_ENV="development"
113 |
114 | ```
115 |
116 | after that create a env file in root folder of server - location (/server/.env)
117 |
118 | ```bash
119 | # your mongodb uri - replace username and password and provide yours
120 |
121 | MONGO_DB_URI="mongodb+srv://username:password@project.wvpqroq.mongodb.net/genkartv2?retryWrites=true&w=majority&appName=project"
122 | # gmail to send mail to users for reset password
123 | EMAIL_USER="genriotesting@gmail.com"
124 | # gmail app password to provide access to send emails --for info search how to send mail use nodemailer in node js
125 | EMAIL_PASS="vivh ztpd snny zjda"
126 | # client url
127 | CLIENT_URL="http://localhost:3000"
128 | # node environment
129 | NODE_ENV="production"
130 | # cloudinary name
131 | CLOUDINARY_CLOUD_NAME=""
132 | # cloudinary api key
133 | CLOUDINARY_API_KEY=""
134 | # cloudinary secret key
135 | CLOUDINARY_API_SECRET=""
136 | # cloudinary folder name to store files in specific folder
137 | CLOUDINARY_FOLDER_NAME="Genkartv2"
138 | # jwt secret to encode and decode admin token between client and server -provide same value as frontend
139 | JWT_SECRET="adminfksnkzv"
140 | # jwt secret to encode and decode user token between client and server -provide same value as frontend
141 | JWT_USER_SECRET="usernsdbdskvn"
142 | # jwt expiration
143 | JWT_EXPIRES_IN="1d"
144 | ```
145 |
146 | ### how to run it
147 |
148 | note : initially the website will be blank because no user , admin or products are not present in your database..
149 |
150 | create two terminals in vs code
151 |
152 | in first one
153 |
154 | ```bash
155 | cd server
156 | npm install
157 | npm start
158 | ```
159 |
160 | in second one
161 |
162 | ```bash
163 | cd client
164 | npm install
165 | npm run dev
166 | ```
167 |
168 | Now you have running your frontend and backend
169 | all the running url will be displayed on respective terminal
170 |
171 | ### create admin user
172 |
173 | Important note :
174 |
175 | initially go to below file
176 |
177 | /server/routes/authRoutes.js
178 |
179 | then uncomment the admin signup route
180 |
181 | --
182 |
183 | note i didn't provide admin signup ui , due to secure concerns . after create admin comment the respective route in server auth route - (admin signup)
184 |
185 | open postman
186 |
187 | then create new workspace
188 |
189 | then provide url backend url with respective route
190 | for example : if you running in localhost 5000
191 |
192 | http://localhost:5000/api/auth/admin/signup
193 |
194 | 
195 |
196 | after that you got a response similar like above image
197 |
198 | then in frontend url login with respective email and password to gain access to admin dashboard in ,
199 |
200 | http://localhost:3000/admin
201 |
202 | then you can add and remove products in admin dashboard
203 |
204 | # project authority
205 |
206 | this project is developed only by @sebe2k04 , if you have any queries contact me on ,
207 |
208 | github :
209 |
210 | https://github.com/Sebe2k04
211 |
212 | linked in :
213 |
214 | https://www.linkedin.com/in/sebe2k04/
215 |
216 | gmail :
217 |
218 | sebe2k04@gmail.com
219 |
220 | website:
221 |
222 | https://sebe2k04.vercel.app/
223 |
224 | this project is developed only by myself - sebe , to showcase my developing skills , im a fresher and im currently looking full time job oppurtunities , thank you all...
225 |
--------------------------------------------------------------------------------
/client/src/app/admin/secure/products/create/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Search from "@/components/Search";
3 | import Link from "next/link";
4 | import { FaCirclePlus } from "react-icons/fa6";
5 | import { IoIosArrowBack } from "react-icons/io";
6 | import { FaBox } from "react-icons/fa6";
7 | import { Select, Option, Spinner } from "@material-tailwind/react";
8 | import { Switch } from "@material-tailwind/react";
9 | import { useRef, useState } from "react";
10 | import { axiosConfig } from "@/utils/axiosConfig";
11 | import { toast } from "react-toastify";
12 | import axios from "axios";
13 | import { axiosInstance } from "@/utils/axiosConfig";
14 |
15 | export default function Page() {
16 | const categories = [
17 | {
18 | label: "Casuals",
19 | value: "casuals",
20 | },
21 | {
22 | label: "T shirts",
23 | value: "tshirts",
24 | },
25 | ];
26 |
27 | const [name, setName] = useState("");
28 | const [category, setCategory] = useState("");
29 | const [vendor, setVendor] = useState("GenRio");
30 | const [MRPprice, setMRPprice] = useState("");
31 | const [sellingprice, setSellingprice] = useState("");
32 | const [quantity, setQuantity] = useState(10);
33 | const [description, setDescription] = useState("");
34 | const [trend, setTrend] = useState(false);
35 | const [offer, setOffer] = useState(false);
36 | const [image, setImage] = useState(null);
37 | const [additionalImages, setAdditionalImages] = useState([]);
38 | const [loading, setLoading] = useState(false);
39 | const inputFile = useRef(null);
40 |
41 | console.log(image);
42 | console.log(additionalImages);
43 | const MAX_LENGTH = 2;
44 | const handleReset = () => {
45 | if (inputFile.current) {
46 | inputFile.current.value = "";
47 | inputFile.current.type = "text";
48 | inputFile.current.type = "file";
49 | }
50 | };
51 | const handleAdditionalImages = (e) => {
52 | if (Array.from(e.target.files).length > MAX_LENGTH) {
53 | e.preventDefault();
54 | toast.error(`Cannot upload files more than ${MAX_LENGTH}`);
55 | // e.target.files = null;
56 | handleReset();
57 | return;
58 | } else {
59 | setAdditionalImages(e.target.files);
60 | }
61 | };
62 |
63 | const handleSubmit = async (e) => {
64 | e.preventDefault();
65 | setLoading(true);
66 |
67 | const formdata = new FormData();
68 | formdata.append("name", name);
69 | formdata.append("description", description);
70 | formdata.append("vendor", vendor);
71 | formdata.append("MRPprice", MRPprice);
72 | formdata.append("sellingPrice", sellingprice);
73 | formdata.append("quantity", quantity);
74 | formdata.append("category", category);
75 | formdata.append("trend", trend);
76 | formdata.append("offer", offer);
77 | formdata.append("image", image);
78 | // let additionalImagesData = JSON.parse(additionalImages)
79 | // additionalImagesData.forEach((img) => formdata.append('additionalImages', img))
80 |
81 | for (let i = 0; i < additionalImages.length; i++) {
82 | formdata.append("additionalImages", additionalImages[i]);
83 | }
84 |
85 | try {
86 | const res = await axiosInstance.post(`/product`, formdata, {
87 | headers: {
88 | "Content-type": "multipart/form-data",
89 | },
90 | });
91 | console.log(res.data);
92 | setLoading(false);
93 | toast.success("Product added successfully");
94 | } catch (error) {
95 | toast.error("Error creating product");
96 | setLoading(false);
97 | console.error(error);
98 | }
99 | };
100 |
101 | return (
102 |