Skip to content

Urban Grace is an e-commerce store developed with HTML, CSS, and Vanilla JavaScript.

License

Notifications You must be signed in to change notification settings

rdpfeifle/ecomm-store-js

Repository files navigation

Urban Grace store

Urban Grace is a one-page e-commerce website created as a personal challenge, built from scratch without using frameworks or libraries. Future enhancements may include incorporating frameworks or libraries as needed.

Urban Grace store - mockup

Technologies Used

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • Fake Store API
  • Cypress for end-to-end tests

Cool things I've done with it

✅ Established a project board on GitHub, viewable here.
✅ Created different issues for different functionalities/bugs, which can be seen here.
✅ Created separate branches and pull requests for each feature and fix. Check them out here.
✅ Implemented a CI/CD pipeline for E2E Cypress tests via GitHub Actions, accessible here.
✅ Deployed on Netlify, live version available here.

Current features

  • Adds/deletes products from the cart.
  • Filters the products by categories.
  • Responsive design using CSS grid and flexbox.
  • Shopping cart functionality as a responsive modal.
  • localStorage integration for cart persistency.

Future (possible) changes

  • Allow users to click anywhere outside the cart to close it.
  • Generates alerts for successful actions, failures, and other events.
  • Addition of a product details page
  • Create a checkout page

Instructions

1. Clone the repo:

git clone https://github.com/rdpfeifle/ecomm-store-js

2. Navigate to the project directory and open it in your preferred IDE.

cd ecomm-store-js ; code .

3. Install dependencies for the project:

npm install

4. Start the app by running the following command. This will launch a local server:

npm start

Then, access the app in your browser at http://127.0.0.1:8080.

License

This project is licensed under the MIT License.