Giter Club home page Giter Club logo

shopy's Introduction

Learn

This document provides instructions on how to set up and build the project locally. This project is a clothing order website that allows user to add products , list their own products, make dashboard of seller

Prerequisites

Before you begin, ensure you have the following installed on your local machine:

  • Node.js (v14.x or later)
  • npm (Node Package Manager v6.x or later)

Table of Contents

Setup

Follow these steps to set up the project locally:

  1. Clone the repository to your local machine:

    git clone https://github.com/mohitparmar1/Shopy.git
  2. Navigate to the project directory:

    cd SHOPY
  3. Install project dependencies:

    npm install
     npm install vite
  4. Start the development server and run the app

    npm run dev

Contributing Guidelines

Before diving into the learning resources, please familiarize yourself with the following contributing guidelines:

  • Participants/contributors must comment on issues they wish to work on.
  • Issues will be assigned on a first-come, first-serve basis by mentors or the Project Administrator (PA).
  • Participants can open new issues using the provided template, but these need verification and labeling by a mentor or PA.
  • Ensure issues are assigned to you before starting work.
  • Each participant can work on a maximum of one issue at a time.
  • Don't work on issues already assigned to others.
  • Discuss issues with the team before starting work.
  • Explain your approach to solving any issue in the comments for better understanding.
  • Pull requests will be merged after review by a mentor or PA.
  • Create PRs from branches other than main.
  • Include a descriptive summary of your work in the PR description.
  • Use the format Fixes: issue number in your commit message when creating a pull request.
  • Complete assigned issues within the specified deadline. Failure to do so may result in reassignment.
  • Follow project guidelines and coding style.
  • Aim for structured and optimized code.
  • Mistakes are allowed and part of the learning process!

Getting Started

To contribute to the project, follow these steps:

  1. Fork the Repository: Start by forking the repository to your GitHub account.
  2. Clone the Repository: Clone your forked repository to your local machine.
  3. Choose an Issue: Comment on an issue you'd like to work on or open a new one following the guidelines.
  4. Set Up Development Environment: Refer to the project's development guidelines for setting up your development environment.
  5. Start Working: Once the issue is assigned to you, start working on it following your chosen approach.
  6. Submit a Pull Request: After completing your work, submit a pull request from your branch for review.

Issue Management

Issues are managed as follows:

  • Participants must comment on issues they wish to work on.
  • Issues will be assigned on a first-come, first-serve basis.
  • Participants can open new issues using the provided template, but these need verification and labeling by a mentor or PA.
  • Ensure issues are assigned to you before starting work.
  • Each participant can work on a maximum of one issue at a time.
  • Don't work on issues already assigned to others.
  • Discuss issues with the team before starting work.

Communication and Collaboration

Effective communication and collaboration are crucial for successful contributions:

  • Discuss issues with the team before starting work.
  • Explain your approach to solving any issue in the comments for better understanding.

Deadline and Completion

Ensure timely completion of assigned tasks:

  • Complete assigned issues within the specified deadline.
  • Failure to meet the deadline may result in reassignment.

Quality and Learning

Learnings:

  • Client-Side Development: Understanding how to build a user-friendly interface using React and TailwindCSS.
  • Server-Side Development: Utilizing Node.js and Express for server-side logic and API integrations.
  • Git Workflow: Understanding the Git workflow for contributing to open-source projects, including forking, branching, committing, and creating pull requests.

Focus on quality and continuous learning:

  • Follow project guidelines and coding style.
  • Aim for structured and optimized code.
  • Mistakes are allowed and are a part of the learning process!

shopy's People

Contributors

ayush-may avatar ayushpatel1248 avatar caliber-ruchi avatar chaitanyarora avatar dakshsinghrathore avatar dharshibalasubramaniyam avatar dhruv8433 avatar gyanendra-baghel avatar himankpatidar avatar jaymehta002 avatar mandakini-s avatar meetjain1 avatar mohit-bhandari45 avatar mohitparmar1 avatar mr-programera avatar nagalakshmi08 avatar nagamukesh avatar neelamnagarajgithub avatar nirajsingh015 avatar niteshtiwari52 avatar officeneerajsaini avatar pradeepsde avatar prafulnigam avatar rithwik3425 avatar saurabhs55 avatar siddheshhr avatar suhanipaliwal avatar sumeet05xcaliber avatar tanaymaurya84 avatar ujjwalgupta1105 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

shopy's Issues

Bug: Website Crashes when a route is accessed directly through URL

Description

Currently, the website has a bug due to which it crashes everytime user tries to access any route of the website directly through URL instead of clicking the button. This completely ruins the user experience of the website so it is necessary to fix this issue. Check-out the video below to understand the bug properly.

Recording.2024-05-10.234123.mp4

I have great experience with Vercel Deployments so I can fix this bug easily.

@mohitparmar1 Kindly assign me to this issue so that I can fix it as soon as possible (under GSSOC'24).

Making the "popular in women" responsive

The popular in women component has issues of responsiveness for mobile screens which makes it difficult to use for users operating on mobile phones.
Screenshot 2024-05-11 183421
I can correct this issue so that it appears good on small screens it will look like the following image on small screens :
Uploading Screenshot 2024-05-11 183816.png…

Please assign me this issue under Gssoc'24 so I can correct this

Add Topics

In GSSoC'24, GitHub Topics will help the discoverability of your project.

I see that you already have great topics on your repository!
I would recommend adding the name of the company like the software you use to build like "vs-code, ghdesktop" to improve your discoverability.

If you are happy with the topics you have, feel free to close this issue. 👍

Backend: Implementing forgot and Reset password

Earlier I created the #31 but someone already created #19
Now I want to implement backend routes for forgot and reset password with OTP verification.

Please assign this issue to me.

Although this requires to the basic setup of backend. I ready to collaborate on #19 If issue creator of #19 has no problem.

Make check now page

there is no check now component in project . So, Can you assign this issue to me I can make check now page.

Lgin and signup authentication

I am new to Gssoc i can contribute to the project by adding login and signup pages by providing authentication through mongoDB so please add label and assign the task for me

Creation of RESTful API FOR items

as of know there is the data in the json file itself. by using the MVC architecture , i can create a restful api route which serves the frontend and connect the api to frontend.

please assign me this issue under GSSOC24

[BUG]: "GET UPTO 30% OFF" text responsive issue

Describe
this text is overlapping all the contents that in coming in his way , so it makes hard to see other things in small devices

Reproduce

  1. open site
  2. Try to change the window size , u can detect the issue there

image

Video reference

Screencast.from.11-05-24.08.38.09.AM.IST.webm

Learn.md

Learn repos should have a LEARN.md file to teachstudent how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Carousel on home page

Just a simple image on homepage looks very simple and boring let's put a carousel which will attract users focus towards the diffrent products.

Iam experienced in building such carousels and I want to create one for this site.
can you please assign me this issue under gssoc'24 so that I can work on this issue.

Setting up basic backend and login/signup functionality

Description

Development of complete setup of Backend Server and Database.

The project currently does not have a proper backend server and a connect DB. So, I will setup both the things and make them ready to be connect with the frontend part of this project. I will also deploy the server to make it production ready.
Other than the basic setup, I will also develop the complete login/signup functionality (backend). It will include all necessary things like schema(s), validation files + middlewares, error handling, JWTs, profile customization, etc.

{By basic backend setup I mean, necessary things like Express App, Mongoose & MongoDB, Custom Error Class, Error Handling Middlewars, etc. will be developed}

Tech libraries/frameworks which I will use to accomplish the above mentioned task(s):

  • ExpressJS
  • NodeJS
  • JWT
  • MongoDB
  • Mongoose
  • Vercel

@mohitparmar1 Please assign me this issue (under GSSOC'24). I will do my best to accomplish all the tasks mentioned above.
Looking forward to a positive response! 🙂

Positioning of Navbar and Footer Links

Screenshot 2024-05-08 230423

As part of my participation in GSSoC , I want to integrating certain links currently located in the footer into the navbar of the project. Specifically, the task involves moving the "Home," "Products," and "Contact" links from the footer to the navbar to enhance navigation accessibility and consistency throughout the website.

Add templates for issues

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

ADD install vite in README.md

In this Project after following your guideline it gives error who do not use vite will face error so update README. md
Screenshot 2024-05-11 110751

Hey, assign this issue to me under GSSOC24

Working Over Cart's UI

I am Praful Nigam. Under GSSOC'24, I would like to work on this issue. Pls assign me this!!

Frontend Navbar Responsive

I want to make responsive navbar on small screen. Right now it gets overflow on small screen.
Could you please assign me this issue. So that I can proceeds with issue.

Notifying the user when the product is added to the cart

When we are hitting the Add to cart button it is not notifying the user that the product is added to the cart .

Shopy_Add_to_cart

So ,I want to add this feature that whenever the user hit the Add to Cart button it will show him a message " Product Added To The Cart ".

Backend Setup with Browser optimized code

I want to setup a Backend functionality from starting on MVC folder structre.

This is the folder structure that i want to implement in order to modify the codebase for the future implementation.
image

I will also implement the authentication part :

  1. Login
  2. Signup

Could you please assign me this issue??

[FEAT] Connecting frontend and backend

As of the issues #19 and #31. They both are creating rest full api and login/sign up functionality,
I would like to connect the front end to the backend server.

The features which will be implemented
✅ Data fetching from the server
✅ Displaying the data in the UI
✅ Redesign the UI

Add issues

As the maintainer of a Collaborate repo, keeping Issues up-to-date will help the student community understand what they can do to contribute. Issues should vary by the easy (update documentation) to the difficult (add a new feature). The more involved you are, the more opportunities there are to collaborate.

Recommendations:

Add issues of varying difficulty to the repo often. you can add the tag GSSoC'24, good first issue etc.
Generate issues even if you plan on solving them, so the repository appears as active.
Contribute/commit often to the repo so it does not go stale.

Reference https://github.com/Recode-Hive/Stackoverflow-Analysis/issues

Saving items for future reference

While searching for products, users should have an option to save those items which they like in a list which they can refer later to buy that items in future.

Screenshot 2024-05-10 190218

So, I want to enable this feature by having a separate webpage, from where users can directly add the items in the cart.

Girlscript Summer of Code Introduction/Tracking

👋 Hi @mohitparmar1 ,

I am Sanjay, program Manager https://github.com/girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you :octocat:

[BUG]: enhancing the Login and Signup page

login page and signup page need to be improve , they arent matching with the website UI

addition content addition :

  • add a google login and sign up button to register with google (only front end)

image

make footer Responsive

The footer of website is not responsive I can make footer responsive and interactive. Can you assign this issue to me under GSSOC24

Re-designing Login & Signup Page(s)

Description

Currently the login and signup pages are not at all attractive for the common users and also don't match with the theme of the website. So, it is important to re-design them in a way that the users feel tempted to fill in form(s) after seeing them.

This is the current login form:
image

And these are my previously deigned forms (will re-design for this project similarly):
image
image
image

How will I do it?

  • Improve basic things like Padding and Buttons
  • Add beautiful vector images which match with the theme
  • Change the color scheme and typography which complements the theme of the website
  • etc. (any other necessary change required)

@mohitparmar1 Please assign me this issue. I will give my best to accomplish everything mentioned above.

Looking forward to a positive response. 😄

learn.md not found

I can make a learn.md file discussing the project explaining all the features and related technologies and screenshots according to gssoc 2024
please assign this issue to me under gssoc 2024

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.