mikejakuszewski / ecommerce Goto Github PK

e-Renaissance

Your one and only electronics store!
Explore the docs »

View Demo · Report Bug · Request Feature

Site is live, but payments and shipping are not active yet!

You're looking for electronics? We have a wide variety of electronics for all your needs. From computers to cameras to cell phones, we have you covered. And don't let our low prices fool you – these aren't your average products! Our e-Renaissance certified gadgets offer great quality and won't break the bank.

We are a leading online electronics store that is committed to providing the best customer service. We offer a wide range of products including mobile phones, laptops, televisions and much more. Our team of experts will guide you through the process of making your purchase and offer you advice on how to take care of your new device.

(back to top)

(back to top)

The MVP was heavily inspired by this Figma design. Our MMP design is inpsired by Amazon/BestBuy single page design.

(back to top)

This is an example of how you go about setting up our project locally. To get a local copy up and run follow these simple example steps.

• Node.js: Download
• Git: Download
• Stripe: Account, Secret & Publishable key
• Cloudinary: Account Secret Key & Product Images
• MongoDB Atlas: MongoDB Account & Secret Key

1. Clone the repo into the desired folder

   git clone https://github.com/kbventures/ecommerce.git

2. Go to cloned folder

   cd ecommerce

3. Install NPM packages into both client and server folders

   cd client
   npm install
   cd ../server
   npm install

4. Change client URL to your localhost or your provider

   cd client/src/contexts
   Itemscontext.jsx
   
     useEffect(() => {
    const fetchItems = async () => {
      const response = await fetch(`http://localhost:4001/api/products`);
      const json = await response.json();
      setItems(json);
    };
    fetchItems();
    
    cd ..
    cd routes/Basket
    index.jsx
    
    async function handleSubmit(e, basket) {
    e.preventDefault();
    const url = await fetch("http://localhost:4001/api/create-checkout-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(basket),
    }).then((i) => i.json());
    window.location.href = url;
    }

5. Change Server URLS

   cd server/src
   app.ts
   
   app.post(
   '/api/create-checkout-session',
   async (req: Request<any, any, LineItem[], any>, res: Response) => {
    console.log(req.body);
    const products = req.body.map((e) => ({
      price: e.default_price?.id,
      quantity: 1,
    }));
   
    const session = await stripe.checkout.sessions.create({
      line_items: products,
      mode: 'payment',
      success_url: 'http://localhost:8080/home',
      cancel_url: 'http://localhost:8080/',
    });
   
    res.json(session.url);
   }
   );
   

6. Add .env file inside server directory

   MONGO_URI=YOUR_SECRET_KEY
   STRIPE_SECRET=YOUR_SECRET_KEY
   PUBLISHABLE_KEY=YOUR_SECRET_KEY
   SECRET=YOUR_SECRET_KEY

1. Start Client

   cd client
   npm run dev

2. Start Server

   cd ..
   cd server
   npm run dev

3. Go to http://localhost:8080/ if you wanna see client, or http://localhost:4001/ for server

(back to top)

cd server
npm run test

(back to top)

cd server
npm run build

cd client
npm run build

(back to top)

As a team we learned to work continuously and asynchronously on designing, developing, testing, and deploying a full stack application with Stripe third party integration. We expanded our knowledge of React, Express.js, MongoDB, Node.js, Webpack, several deployment solutions, CI/CD, using Vercel's development preview branch, mono repos, automated testing, Typescript, documentation, linting, coordinating as a team, code reviews, CSS Modules, GitHub Primer's CSS design systems, communication, UX/UI design, Figma, and managing a project(Github project).

• MVP
• [] MMP
  • Implement new Figma design
  • Improve accessibility, performance & SEO metrics
  • Automated testing
  • Move front end to Typescript
  • Client sign up
  • Client login, logout & authentication
  • Client dashboard features
  • Back services to support authentication and client routes

See the open issues for a full list of proposed features (and known issues).

(back to top)

1. Clone the repository with this command if you don't have it:

   git clone https://github.com/kbventures/ecommerce.git

2. Run the following command to make sure you have the latest changes on the main branch

   git pull

3. Create a new feature branch with a descriptive name and only make your changes here. For example, to add this README documentation I would call this branch add-git-workflow.

   git checkout -b <your feature branch name>

4. Make as many changes as you need in your feature branch. You can use the following commands per commit message - or add the individual files instead of using the .

   git add .
   git status
   git commit -m <your commit message>

5. Once your feature is ready and you're ready to merge into the main branch first make sure to push your local branch changes to GitHub.

   git push --set-upstream origin <your feature branch name>

6. Go to https://github.com/kbventures/ecommerce/branches and you should see your newly pushed feature branch. Find and click the button, "New pull request", to request that your changes be "pulled" into the main branch.

7. When you click the button, complete the form required for each pull request and click "Create pull request".

8. In the top right corner, click "Reviewers" and add one person on the team as the Reviewer for the pull request.

9. Once the Reviewer has looked at your pull request and verified that everything is OK, they will merge your pull request into the main branch.

1. From within your feature branch, fetch the latest changes from the main branch

   git fetch origin main

2. Rebase so that your feature branch history is stacked on top of the latest main branch history

   git rebase origin/main

3. Now resolve the conflicts manually in your code editor one at a time. Git will tell you which files have a conflict. Once you've resolved the conflicts run the following commands:

   git add .
   git rebase --continue

4. Write and save a commit message if all conflicts are resolved.

5. Push your rebased feature branch changes to GitHub's computers.

   git push -f origin <your feature branch name>

6. Go back to your pull request on Github your pull request should have no conflicts and you can merge into the main branch!

Also, don't forget the most important rule of rebasing:

NEVER REBASE ON A REMOTE BRANCH >

Why do we care to write a good commit message? A well-crafted Git commit message is the best way to communicate context about a change to other developers working on that project, and indeed, to your future self.

A commit has two parts: a subject (max 50 characters) and a description. Use the following command to separate a subject from the description.

git commit -m "Subject" -m "Description..."

In each commit message:

1. Specify the type of commit in the subject. Example: Feat: create landing page.

   • feat: The new feature you're adding to a particular application
   • fix: A bug fix
   • style: Feature and updates related to styling
   • refactor: Refactoring a specific section of the codebase
   • test: Everything related to testing
   • docs: Everything related to documentation
   • chore: Regular code maintenance.

2. Separate the subject from the body

3. Remove whitespace errors

4. Remove unnecessary punctuation marks

5. Do not end the subject line with a period

6. Capitalize the subject line and each paragraph

7. Use the body to explain what changes you have made and why you made them.

8. Do not assume the reviewer understands what the original problem was, ensure you add it.

9. Do not think your code is self-explanatory

(back to top)

We are grouping by feature as listed in React docs. See Grouping by features or routes

(back to top)

We are using ESLint with Airbnb rules, alongside Prettier to format code and follow modern standards when writing Javascript. In addition, we can minimize runtime errors.

(back to top)

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Dmitry Kulakov - @atomeistee - [email protected]

Enrick Andersen Ong - @rickansen

Ken Beaudin - @kb9700

Abdhul Shabbir - @abdulshabbirdev

Jennie Allen - @jenanemone

(back to top)