Store that sells PEV devices like EUC, E-bikes, and E-scooters
EV-Wheels is an easy-to-use e-commerce store that allows shoppers to buy PEV devices. It contains all the e-commerce essentials for adding products and using PayPal and personal credit cards as payment systems.
EV-Wheels
- Login
user: tom@gmail.com
pass: 123456
Click to view the demo of EV-Wheels
- Node.js
- Express - version 4.17.1
- Express-async-handler - version 1.1.4
- Mongoose - version 5.10.0
- Bcryptjs - version 2.4.3
- Dotenv - version 8.2.0"
- Jsonwebtoken - version 8.5.1
- Mongoose - version 5.10.9
- Morgan - version 1.10.0
- Multer - version 1.4.2
- JavaScript (ES6)
- HTML5
- CSS3
- React.js - version 16.14.0
- React-DOM - version 16.14.0
- React-Router-DOM - version 5.2.0
- React-Scripts - version 3.4.4
- Redux - version 4.0.5
- Redux-thunk - version 2.3.0
- Axios - version 0.20.0
- React-bootstrap - version 1.3.0
- React-helmet - version 6.1.0
- Clone the GitHub repository locally to your computer
- In the command line, navigate to the root directory of the repository, and type the following: $ npm install
- Navigate to the frontend folder, and in the root directory of the frontend folder, type the following: $ npm install
- In the frontend folder, and in the root directory of the frontend folder, type the following: $ npm start
- Navigate to the backend folder, and in the root directory of the backend folder, type the following: $ npm install
- Create a
.envfiles for server - Create a MongoDB account and get the URL
- Add MongoDB URL in the env file
MONGO_URL=your-key-here
- Create a PayPal account and get the id
PAYPAL_CLIENT_ID=your-id-here
npm devto start the client and server together- Visit
localhost:3000
app.get('/api/config/paypal',(req,res)=>res.send(process.env.PAYPAL_CLIENT_ID))const__dirname=path.resolve()app.use('/uploads',express.static(path.join(__dirname,'/uploads')))//check if productionif(process.env.NODE_ENV==='production'){app.use(express.static(path.join(__dirname,'/frontend/build')))app.get('*',(req,res)=>res.sendFile(path.resolve(__dirname,'frontend','build','index.html')))}else{app.get('/',(req,res)=>{res.send('API is Running...')})}//check errorapp.use(notFound)app.use(errorHandler)constPORT=process.env.PORT||5000app.listen(PORT,console.log(`Server running in ${process.env.NODE_ENV} on port ${PORT}`))useEffect(()=>{dispatch(listProducts(keyword,pageNumber));},[dispatch,keyword,pageNumber]);return(<divclassName='store-container'><SearchBoxhistory={history}/>{/* {!keyword ? ( <ProductCarousel /> ) : ( <Link to='/' className='btn btn-light'> Go Back </Link> )} */}<h1>Latest Products</h1>{loading ? (<Loader/>) : error ? (<Messagevariant='danger'>{error}</Message>) : (<><Row>{products.map((product)=>(<Colkey={product._id}sm={12}md={6}lg={4}xl={3}><Productproduct={product}/></Col>))}</Row><Paginatepages={pages}page={page}keyword={keyword ? keyword : ''}/></>)}</div>);- Full-stack web application utilizing the MERN stack: MongoDB, Express.js, React, and Node.js.
- Authorization and authentication implemented with JWT and bcrypt.
- Front-End styles and shop components built with CSS and Bootstrap.
- Users can create an account through the application.
- Users can add profile information, payment information, shop, and checkout.
- Add PEV devices and update them as they get processed
- Admin accounts can add and delete products, handle shipment, and drop and edit user accounts.
The project is: finished with the option to expand functionality and DRY out code.
The inspiration for EV-Wheels came as I was riding my e-bike. With the increase of PEV devices currently available in the market. I decided to create a store to sell all my favorite devices and allow users easily shop for PEV in one location.
Created by Van Vy Feel free to contact me with any questions!
