Code Monkey home page Code Monkey logo

online-elecctricals-shop_mern-stack's Introduction

demo

Live site found here: www.amitabhkumar.com

eCommerce Marketplace is an online marketplace that enables an online retailer to sell products online, accept credit card and paypal payments, view orders and receive email notification of orders placed for further processing. & vice versa for the online customers. See it live at www.amitabhkumar.com Technically a MERN Stack E-commerce project: Node JS API (Backend), React JS (Frontend) & powered byMongoDB database. JWT Authentication, Digital Ocean's Cloud Servers, Cloudflare CDN for speed and SSL for security, Braintree Payment Processing, Custom Domain name from Godaddy.com.

Tech and features

  • Node JS API (Backend) Development
  • React JS (Frontend) Web Development
  • Functional Components with React Hooks
  • Payment Gateway using Credit Card and PayPal
  • Integrate Braintree (A PayPal Company) for Payment Processing
  • Implement Advance Searching/Filtering based on Categories
  • Implement Advance Searching/Filtering based on Price Range
  • Implement Standard Products Search System with Categories option/dropdown
  • Implement Authentication based on JWT
  • Flexible Private and Admin Routing System
  • CRUD with Products and Categories
  • File Upload
  • LocalStorage (CRUD) to Minimize Requests to Backend
  • Sold Products Record into the Database for Further Processing
  • User Profile and Update Ability
  • Implemented Order Management System by Admin
  • Deployed on Digital Ocean's Cloud Servers
  • Added a Custom Domain name to the app
  • Cloudflare's CDN to serve the app (for speed)
  • Cloudflare's SSL to secure the app

Description

As an owner of a small business, I need a simple and responsive website using React that I can use to sell my products.

This template used React, MongoDB, Mongoose ORM, and customized React-Bootstrap components. A user is able to fork this repository and create their own ECommerce site for a business by uploading items to the Mongo database with a simple form. The front-end has easy styling and customization options within one file to suit any brand. By utilizing the built-in PayPal payment system, customers can place orders throught the site, recieve email confirmation of their purchase, and store administrators recieve notice of a purchase.

User Stories

  • As a customer, I want to Signup with my email address, username and password, so that I can create my account and do future Login’s.
  • As a customer, I want to login with my email address and password so that I can able to buy and search the products.
  • As a customer, I want to logout, so that no one can gain access to my account.
  • As a customer, I want to create a profile, so that I can see my personal details and view my item purchase history and the amount I spent on them.
  • As a customer, I want to edit my profile, so that I can edit my account and personal details, for .eg Address, whenever I want.
  • As a customer, I want to delete my account so that I can remove my access to the app whenever I want.
  • As a customer, I want to see my cart so that I know how many products I am buying.
  • As a customer, I want to search products so that I can choose what products I want.
  • As a customer, I want to pay for the products I am buying so that I can able to purchase them.

As a Admin,

  • As a Admin, I want to login with my email address and password so that I can see every history and details related to the application.
  • As a Admin, I want to logout, so that no one can gain access to my account and the admin panel.
  • As a Admin, I want to add a product to my application so that I can I can add products for the customers.
  • As a Admin, I want to update a product so that I can I can keep my products details and pictures up-to-date for the customers.
  • As a Admin, I want to delete the products so that I can remove the products if they are no longer available.
  • As a Admin, I want to see my customer address details so that we can send the product to the right destination.
  • As a Admin, I want to upload a picture of my product so that customer have an eye-view of the product they are going to buy.

Pages

demo demo demo demo demo demo demo

Wireframe

demo

ASSIGNMENT CRITERIA

✔️ = Done 😊 | ❌ = Not Done 😞 | ❎ = Kinda Done 😑

Setting expectations with your clients

  1. ✔️ When approaching your client, be upfront about this being a project you are doing as part of the bootcamp graduation.
  2. ✔️ There is to be no expectations on you, the students, to deploy the application for use of the client. Make sure the client is aware of this and is agreed upon.
  3. ✔️ There is to be no confidentiality agreement to be entered into. Deliverables

Client interaction

Demonstrate your ability to satisfy your client with the quality of your work and high level of service.

  1. ✔️ Record all interactions with your client in a diary format.
  2. ✔️ Plan information gathering activities to determine project requirements, constraints and risks
  3. ✔️ Develop project charter, including preliminary statement of project scope and obtain sign-off
  4. ✔️ Prepare project work breakdown, schedule and budget
  5. ✔️ Compile project management plan documents as necessary to communicate the intended management strategy for the project and obtain sign-off
  6. ✔️ Identify and select team members, and allocate roles and responsibilities, based on project solution requirements
  7. ✔️ Determine training and support needs of team members
  8. ✔️ Establish project team values and agreed behavioural standards with team members
  9. ✔️ Monitor delivery and acceptance of assigned project team work activities and manage individuals
  10. ✔️ Monitor and control project scope changes, risks and issues
  11. ✔️ Manage system testing and hand over activities
  12. 😑 Prepare IT support plans and maintenance or support documents
  13. 😑Obtain final project sign-off
  14. 😑Conduct post project review
  15. 😞 Create a questionnaire for the client to ascertain the satisfaction with your product and service. Application Design

Demonstrate your ability to break down the problem and design a solution.

  1. ✔️One page summary of your application including problem definition, solution.
  2. ✔️Determine the appropriate client technology, development tools, and platform for writing the UI
  3. ✔️Review the conceptual design with the client, and edit as required
  4. 😑A workflow diagram of the user journey/s.
  5. ✔️Wireframes for at least 5 screens.
  6. ✔️User stories for the whole application.
  7. 😑Entity Relationship Diagram (ERD).
  8. ✔️Project plan and effort estimation.

Tools and methodologies

  1. ✔️Trello or similar project management tool to be used to track progress of build.
  2. ✔️Show evidence of Slack conversations or use of other communication tools.
  3. ✔️Git
  4. ✔️Github. Demonstrate use of frequent commits, pull requests, documentation.
  5. ✔️Use Agile development methodologies.
  6. 😑Provide evidence you have used code quality tools

Author:

Amitabhkumar

online-elecctricals-shop_mern-stack's People

Contributors

harimurugesan2001 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.