Fashion Shop

Logo

A custom e-commerce fashion shop focused on women's apparel. This website/application is built for a small business wanting to have more granular control, adaptability, and custom features of their website.

Technologies:

• Frontend

  

  • React
  • Redux Toolkit
  • Bootstrap
  • React-Bootstrap

• Backend

  

  • Node
  • Express
  • MongoDB
  • Mongoose
  • Postman
  • Seeder

• Testing

  

  • E2E Layer
  • Unit Layer

  

  • Component Layer

  

  • API Layer

• DEVOPS

  • Github Actions
  • Automated Testing checks on PR and main push
  • CI/CD

Demo

Deployed Link on render

Author

@GregPetropoulos

Features

• Fullscreen mode
• Cross platform
• Mobile Responsive
• Full featured shopping cart
• PayPal / credit card integration
• Checkout process (shipping, payment method, etc)
• Product reviews and ratings
• Top products carousel
• Product pagination
• Product search feature
• User profile with orders
• Database seeder (products & users)
• Admin Features
  • Admin product management
  • Admin user management
  • Admin Order details page
  • Mark orders as delivered option

Lessons Learned

Challenges: Admin users uploading images for products

Solutions: Using Node route on the backend to upload images to a public folder, for scalablity will need to implement cloud storage such as Cloudinary.

Documentation

Resource Links

Feedback

If you have any feedback, please reach out to gregpetropoulos@yahoo.com

Usage/Examples

Go to the Login page and enter an admin user or test user

    email: 'admin@email.com',
    password:123456

    email: 'john@email.com',
    password:123456

Run Locally

Clone the project

  git clone https://github.com/GregPetropoulos/FashionShop.git

To run the frontend and backend concurrently

In the root folder

Install dependencies

  npm install

Start the both frontend and backend servers

  npm run dev

To run the backend only

In the root folder

Install dependencies

  npm install

Start the server

  npm run server

To run the frontend only

In the root folder

  cd frontend

Install dependencies

  npm install

Start the server

  npm run start

Testing

To run storybook on the frontend (CDD)

In the root folder

  cd frontend

npm run storybook

# This will run on http://localhost:6006/

To run cypress on the frontend

In the root folder

  cd frontend

npx cypress open

API Reference

There are three core API categories and more detail can be found at the postman docs

• Products API

/api/products

• Users API

/api/users

• Orders API

/api/orders

Environment Variables

To run this project, you will need to add the following environment variables to your .env file, see the .env-example in the root folder

PORT=5000
NODE_ENV=development
MONGO_URI=ADD_YOUR_CONNECTION_STRING_HERE
JWT_SECRET=ADD_YOUR_SECRET
PAYPAL_CLIENT_ID=YOUR_PAYPAL_CLIENT_ID

Deployment

To deploy this project on a platform such as render or heroku:

  npm run deploy

Contributing

Contributions are always welcome!

See contribute for ways to get started.

Please adhere to this project's code of conduct.

Hi, I'm Greg Petropoulos! 👋

🚀 About Me

I am a React/React-Native Front End Developer and enjoy building applications with engaging UI/UX and robust backend API's with Node.js

🛠 Skills

React, React Native, Javascript, HTML, CSS, Node, Express

🔗 Links

Other Common Github Profile Sections

👩‍💻 I'm currently working on React migration to React Native code base

🧠 I'm currently learning Cypress testing strategy and Next.js

👯‍♀️ I'm looking to collaborate on open source Veterans Health apps, Oil and Gas Technology, Department Of Defense, and React Native Elements UI

💬 Ask me about anything frontend

📫 How to reach me gregpetropoulos@yahoo.com

⚡️ Fun fact...I found a dinosaur fossil that remains in the Las Vegas Natural History Museum.