bsoc-bitbyte/getit

Streamlined college e-commerce: Simplifying merch buying and selling for students.

🛒 GETIT

Streamlined college e-commerce: Simplifying merch buying and selling for students.

✨FEATURES

• Clubs can sell
• Sell Tickets for the event
• Buy the merch you like
• Automatic payments for sellers no need for manual verification
• Seller reports

---

📱 Tech Stack

FRONTEND:

• VUE
• NUXT

BACKEND:

• DJANGO REST FRAMEWORK

🔰 GETTING STARTED

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Frontend

PREREQUISITS

The following software is required to be installed on your system:

• Node 16.x
• Npm 8.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

BASIC SETUP

Follow the steps mentioned below to setup the project locally on your computer

1. Fork the repository by clicking on Fork option on top right of the main repository.
2. Open Command Prompt/Terminal on your local computer.
3. Clone the forked repository by adding your own GitHub username in place of <username>.

    git clone https://github.com/<username>/Getit/

4. Navigate to the Getit directory.

    cd Getit
    cd frontend

5. Install all Getit dependencies.

    npm install

6. Run the website locally.

    npm run dev

Backend

• Framework - Django
• Language - Python 3.10

Local Setup

Make sure you are using python 3.10.

• Change your working directory to backend
• Now just run ./run.sh
• Hurray! The backend is up and running!!!

Note : Use seperate env files for backend and frontend to run the project. Need help! Let us know to help you with the .env.

HOW TO CONTRIBUTE ?

The Contributing.md contains the step-by-step procedure for contributing for this project.

FIGMA LINK FOR THE PROJECT(https://www.figma.com/file/w8rDGcgxgDUGzxOzvFX8Eq/Untitled?type=design&node-id=0-1&t=YsftuOHwePR2R58Z-0)

getit's Issues

Implement navbar component

Tasks

• the design for the navbar is given in figma file. If you have any good idea feel free to share it.
• Try to make it responsive
• Figma design for reference Link

Guidance

The file will be created inside the components directory.
It is required to use tailwindcss.

Refactor : Implement Tailwind CSS on Navbar

Is your feature request related to a problem? Please describe.

The navbar of this site currently has normal CSS in it .

Describe the solution you'd like

Tailwind CSS needs to be implement in place of the current CSS .

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Extra White Space at the Bottom of Page

Describe the bug

A little amount of excess white space appears at the bottom of the page when you navigate to "/signin."

Steps To Reproduce

1. Go to localhost:3000/signin

2. Scroll down to bottom

3. See the white margin at the bottom.

Expected Behavior

No response

Screenshots/Videos

What device are you using?

Desktop, Mobile

Operating System

No response

What browsers are you seeing the problem on?

Chrome

Additional context

No response

[BUG]: Changes in the signin and signup pages.

Describe the bug

When viewing the sign-up and sign-in pages, there is a change in the height of the images on both pages, which doesn't look good. There shouldn't be any movement or change in height on either page.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[Feature Request]: Checkout Page

Is your feature request related to a problem? Please describe.

Make the checkout page as per figma design and make it responsive.
It is required to use tailwindcss for styling the page.

**Figma ** Link

Describe the solution you'd like

Make it inside the pages directory.

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Responsiveness issue of Navbar

Describe the bug

The navbar is not fully responsive, the main page content is overlapping with the navbar contents.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

Can be fixed by giving the navbar it's own div and making it's position fixed and some more modifications

[Feature Request]: Make the Pages Align in Center

Is your feature request related to a problem? Please describe.

Make sure the website pages are centered but don't forget to keep them responsive. Also, center align the shop, sign-in, and sign-up pages.

Describe the solution you'd like

For reference you can see here.,

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: Product page

Is your feature request related to a problem? Please describe.

You need to make the product page design as per figma design.
It is required to use tailwindcss for styling the page.

Try to make it responsive.

Figma link

Describe the solution you'd like

It will be based on dynamic routing of Nuxt js.
In the pages directory create a new directory called products and under that create _id.vue which will create a dynamic route of localhost:3000/products/id . Here id is params .
you can also use fakestore api to get fake data so you can design it accordingly.
fakestoreapi.com/products/id

Example:

It's Output:

Now design the page according to figma..

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Remove dark Mode from the Codebase.

Describe the bug

The dark mode code should be removed from the CODEBASE.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[Feature Request]: Add Buget or a way to save images in the backend

Is your feature request related to a problem? Please describe.

Currently while saving the images the current method of using ImageField in Django is flawed it works in the local machine but for the prod the static asset directory is not specified that leads to issue and the image doesnt get rendered.

Describe the solution you'd like

1. Either use a a image hosting service such as amazon s3 bucket.
2. Or change webserver configuration (either apache/nginx) to make them render images using a static path that needs to be modified

The approach is really vague right now and work needs to be done on this so if you have any suggestion regarding rendering the right images do share the idea and let us know if we can help in any way.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: Buy Now and Add to Cart should stick at the bottom of the product page.

Is your feature request related to a problem? Please describe.

Currently when the user scrolls down the product page the buy now and add to cart button goes up, so in order to click them the user has to go back up again to buy/add the product.

Describe the solution you'd like

Both the buttons should stick at the bottom of the page and should have position fixed when the user scrolls the page.

Describe alternatives you've considered

No response

Developer Help

You can see the button should be similar to what flipkart uses currently.

[Feature Request]: setup cors

Is your feature request related to a problem? Please describe.

.

Describe the solution you'd like

.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: setup django and drf

Is your feature request related to a problem? Please describe.

.

Describe the solution you'd like

.

Describe alternatives you've considered

No response

Developer Help

No response

Integrate the Checkout Page with the Backend and ensure the Complete flow

Is your feature request related to a problem? Please describe.

• Currently the checkout page is just a template and hasnt been connected, and needs to be integrated.
• See if the page dynamically changes and updates as per the items in the cart.
• Ensure the proper payment checkout.
• Deny direct access to the route or add some safety there.

Describe the solution you'd like

mentioned in the above points.

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Fix the product page

Describe the bug

Fixing some ui of product page to make them look alike to figma design.
Using the font and colour of the figma design. Fix the spacing between button.
Make the colour selector functional.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[Feature Request]: separate setting for production and development

Is your feature request related to a problem? Please describe.

separte setting for production and development

Describe the solution you'd like

.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: add tests for `event` app

in backend/events/tests.py create tests for the events app

[Feature Request]: Create a bash script to setup the complete backend

Is your feature request related to a problem? Please describe.

Currently its a lot of work to setup the local env for the backend.

Describe the solution you'd like

We can write a bash script to setup the whole process

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Unable to select the radio button while clicking on text of product sizes.

Describe the bug

We are not able to select the product size when clicking on text of the product sizes. It is selecting while clicking on radio button only.

Steps To Reproduce

1. Go to localhost:3000/products/_id

2. Choose the size on clicking on the text of the sizes.

Expected Behavior

The button should be clickable even when the person clicks on the text, not just the radio button.

Screenshots/Videos

What device are you using?

Desktop, Mobile

Operating System

No response

What browsers are you seeing the problem on?

Chrome

Additional context

No response

[Feature Request]: Integrate Event Page with Backend Data and Enable ticket booking with backend

Is your feature request related to a problem? Please describe.

currently everything is hardcoded in the frontend and we have done everything in the backend so we need to integrate backend with the frontend.

Describe the solution you'd like

Nothing fancy just integrate the frontend with the backend.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: Add Navbar to all the Routes

Is your feature request related to a problem? Please describe.

Currently the navbar is only visible at the landing page, when user goes to signin / signup / product page the navbar disappears.

Describe the solution you'd like

The Navbar should be present on all the routes and at the top of the page.

Describe alternatives you've considered

No response

Developer Help

Find a way to keep the navbar in the index.vue and then use some sort of router-outlet to display the contents of the routes being used.

Now other way could be importing the navbar in all the pages, signin, signup but I guess that's not a good option so see how we can go with the above approach.

[Feature Request]: add swagger docs

Is your feature request related to a problem? Please describe.

Adding documentation

Describe the solution you'd like

Using the swagger library

Describe alternatives you've considered

No response

Developer Help

No response

add CONTRIBUTING.md

[BUG]: change cors whitelist to allow frontend deployment

Describe the bug

change cors whitelist to allow frontend deployment

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[BUG]: Make the colour pallete go below the image

Describe the bug

Currently the colour pallete in the product page for mobile view is above the image, while it should be below the image and should be centrally alligned.

Steps To Reproduce

1. Setup your local env.

2. Go to localhost:3000/product/_id

3. See the mobile dispaly

Expected Behavior

Make the colour pallet go below the image and we can also increase the size of the pallets, for better visibility in the mobile displays.

Screenshots/Videos

What device are you using?

Desktop

Operating System

No response

What browsers are you seeing the problem on?

Chrome

Additional context

No response

[Feature Request]: Cart

Is your feature request related to a problem? Please describe.

Make the cart component.

Use tailwind.

Figma Link

Describe the solution you'd like

make the cart as shown in image as a component.

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Shop option should not be there on hamburger when we are on shop page on the website

Describe the bug

There is option of shop in the hamburger when we are on the shop page itself.

Steps To Reproduce

No response

Expected Behavior

There should be the option of shop when we are on that page

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[BUG]: Remove the extra space above the sign-in page

Describe the bug

Steps To Reproduce

No response

Expected Behavior

It should be in accordance with the signup page so that there doesn't show any movement

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[Feature Request]: Changes in Navbar

Is your feature request related to a problem? Please describe.

The alignment of the navbar should be changed, and the height should be reduced. Please make the required changes as shown in the attached image below.

Describe the solution you'd like

Describe alternatives you've considered

No response

Developer Help

No response

initialise project

Refactor : Implementation of Tailwind CSS on Sign-up and Sign-in Page

Is your feature request related to a problem? Please describe.

Both the Sign-up and Sign-in pages currently have normal CSS

Describe the solution you'd like

Tailwind CSS needs to be implemented on both pages instead of normal CSS.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: Design dashboard of the website

Is your feature request related to a problem? Please describe.

Make the dashboard according to the Figma design and ensure it is responsive. Please utilize Tailwind CSS for styling the page. All the necessary details are provided in the design.

https://www.figma.com/file/WYMbU5wej8z0i7o2wKI6y5/Getit-design?type=design&node-id=0-1&t=ZkVPHg1qShpVFcxf-0

Describe the solution you'd like

For now, please hardcode the username and details since the backend is not yet integrated.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: add a linting and testing workflow for backend

Is your feature request related to a problem? Please describe.

.

Describe the solution you'd like

.

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Responsiveness

Describe the bug

Make the cart page mobile friendly.
remove the image(illustration) for mobile view and make table on the right side go at bottom of cart.

something like this.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

Index.vue file is missing

Is your feature request related to a problem? Please describe.

the main page that is index.vue was deleted by someone, and is not currently included in the codebase.

Describe the solution you'd like

Creating the index.vue file inside the pages folder.

Describe alternatives you've considered

No response

Developer Help

No response

Change folder structure to accommodate for backend

Is your feature request related to a problem? Please describe.

.

Describe the solution you'd like

.

Describe alternatives you've considered

No response

Developer Help

No response

[BUG]: Remember me not properly alligned in Galaxy fold phone dimensions

Describe the bug

Remember me is not properly alligned.

Steps To Reproduce

No response

Expected Behavior

It should be properly alligned

Screenshots/Videos

No response

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[Feature Request]: Sign up and Sign In page

Is your feature request related to a problem? Please describe.

Create the sign in and sign up page as per figma design. Navbar is a diffrent issue skip that part.

Figma Link Click me

Describe the solution you'd like

Inside the pages folder, create Signin.vue and Signup.vue files and make it responsive and remove the illustration in mobile view

Describe alternatives you've considered

No response

Developer Help

No response

update README.md

[BUG]: Bottom section on the Signup Page has White Margin

Describe the bug

When you go to /signup, on some of the mobile displays such as "Iphone SE" there is a white margin on the bottom of the page.

Steps To Reproduce

1. Go to localhost:3000/signup

2. Scroll down to bottom

3. See the white margin at the bottom.

Expected Behavior

The little greyish background should be all over the display, instead of white one.

Check for all the mobile and Desktop display that the background is even everywhere.

Screenshots/Videos

What device are you using?

Desktop

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response

[Feature Request]: Shop page

Is your feature request related to a problem? Please describe.

Make the functional and responsive shop page as given in figma file with tailwind.

Describe the solution you'd like

Use tailwind and don't change anything in design without discussion.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: Changes in Sign-in and Sign-up Page.

Is your feature request related to a problem? Please describe.

In Figma design, the image occupies the entire length, and there is extra space between the inputs. For the signup page, please set the background color to white.

Describe the solution you'd like

Link

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: Make add to cart functional

Is your feature request related to a problem? Please describe.

whenever we click add to cart button product with title selected size price and image should get added to cart.
Also store cart in localStorage so that refreshing does not remove that.
this documentation might help Link

use the toast to notify anything like please select size or colour
and item has been added to cart like things. use npm package for toast.

Describe the solution you'd like

use the free api which was used in shop section..

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: add create, get and update account endpoint

Is your feature request related to a problem? Please describe.

.

Describe the solution you'd like

Instead of changing the user model directly, let's create a account model that has a one to one relationship with the user model.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: setup user authentication

Is your feature request related to a problem? Please describe.

.

Describe the solution you'd like

I propose we use token based authentication. JWT is a good option

Describe alternatives you've considered

No response

Developer Help

@Priyansh61 what do you think?

[BUG]: Image dimensions affecting product page visibility and user experience

Describe the bug

Image Dimensions of the product are not good in /products/_id.

Steps To Reproduce

1. Go to localhost:3000/products/_id

2. See the Product Image.

Expected Behavior

The image box should not change with the size of the image and should have a fixed dimenssion.

Screenshots/Videos

What device are you using?

Desktop, Mobile

Operating System

No response

What browsers are you seeing the problem on?

Chrome

Additional context

No response

[Feature Request]: Items in the navbar are not so much attarctive

Is your feature request related to a problem? Please describe.

Items in the nav bar is not attarctive.

Describe the solution you'd like

The items should have some hover effect and some good font style.

Describe alternatives you've considered

I will add some amazing hover effect and change the font style

Developer Help

No response

[Feature Request]: Product card

Is your feature request related to a problem? Please describe.

Make a product card as per design and make it responsive.

Figma: Link

Describe the solution you'd like

Make the card inside components file.

Describe alternatives you've considered

No response

Developer Help

No response

[Feature Request]: add tests for `tickets` app

in backend/tickets/tests.py create tests for the tickets app

[BUG]: Responsiveness Issue of Signin and SIgnup pages

Describe the bug

The code is not supported for the tablet devices such as Ipad or Ipad mini.

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots/Videos

What device are you using?

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Additional context

No response