Git Product home page Git Product logo

e-commerce_website's Introduction

Nest ONDC Project


License: MIT

๐ŸŒŸ Stars ๐Ÿด Forks ๐Ÿ› Issues ๐Ÿ”” Open PRs ๐Ÿ”• Close PRs
Stars Forks Issues Open Pull Requests Close Pull Requests

Project Description

Our project is an ONDC (Open Network for Digital Commerce) site integrated with OpenStreetMap. The aim is to provide a seamless digital commerce experience for businesses and consumers across Bharat. The platform leverages ONDC APIs for data exchange and integration with various digital commerce services.

Additional Resources:

-> Key Features <-

  • Integration with ONDC APIs: Seamless integration with ONDC APIs for enhanced functionality.
  • OpenStreetMap Integration: Utilizes OpenStreetMap for accurate and reliable location-based services.
  • Full-stack Development: Developed using a full-stack approach to ensure a seamless user experience from frontend to backend.
  • Responsive Frontend Design: Designed with responsiveness in mind, ensuring accessibility across various devices and screen sizes.
  • Secure Backend Architecture: Built with a secure backend architecture to ensure the safety and integrity of user data.

๐Ÿ’ป Tech Stacks

HTML CSS JavaScript React.js Redux Node.js Express.js Firebase Realtime Database OpenStreetMap API Git GitHub

Installation

  1. Clone the repository:
    git clone https://github.com/MAVRICK-1/e-commerce_website.git
  2. Navigate to the project directory:
    cd e-commerce_website
  3. Install dependencies:
    npm install
    npm run prepare
  4. Run the development server:
    npm start

Usage

  • Access the ONDC platform: Use the provided URL to access the platform.
  • Explore digital commerce services: Navigate through various features and services offered.
  • Utilize location-based services: Take advantage of the integrated OpenStreetMap for location-based functionalities.
  • Interact with the platform: Engage with the website to experience seamless digital commerce.

Contributing

Thank you for considering contributing to our project! To contribute, follow these steps:

  1. Fork the repository: Click on the "Fork" button on the top right corner of the repository page.
  2. Create your feature branch:
    git checkout -b feature-name
    Replace feature-name with a descriptive name for your feature.
  3. Commit your changes:
    git commit -am 'Add some feature'
  4. Push to the branch:
    git push origin feature-name
  5. Submit a pull request: Once you have pushed your changes to your forked repository, go to the original repository and click on the "New pull request" button. Fill out the necessary information and submit your pull request.

We appreciate your contributions and will review your pull request as soon as possible. Thank you for helping to improve our project!

๐Ÿค Our Contributors

Contributors

Thank you for contributing to our repository


This Project is the part of

GSSoC GSSoC

License

This project is licensed under the MIT License.

Acknowledgements

We extend our heartfelt gratitude to the organizers of GSSOC for offering this invaluable platform to exhibit our talents and make meaningful contributions to the open-source community. Your efforts in fostering a collaborative environment for budding developers are commendable, and we are privileged to be a part of such an esteemed event. Thank you for providing us with the opportunity to showcase our skills and contribute to the advancement of open-source technology.

Don't forget to give us a โญ

e-commerce_website's People

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  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  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

e-commerce_website's Issues

Fix Wishlist Functionality

Issue: Fix Wishlist Functionality

Screenshot 2024-05-09 224606

Description:

Currently, the wishlist functionality on our e-commerce website is not functioning. To address this, we can utilize Firestore to store wishlist data in the backend and render it on the wishlist page. The layout used for the cart page can be repurposed to display wishlist items.

Proposed Solution:

  1. Implement Firestore integration to store wishlist data.
  2. Develop functionality to add and remove items from the wishlist.
  3. Modify the wishlist page layout using the cart page layout as a template.
  4. Ensure seamless rendering of wishlist items on the wishlist page.
  5. Test thoroughly to ensure proper functionality.

Assignee:

Firebase access will be provided for implementation.
Documentation of Firestore : Firestore

Labels:

  • Enhancement
  • Firestore
  • Wishlist

Missing CONTRIBUTING.md File in Repository

The repository currently lacks a CONTRIBUTING.md file, which is an important resource for guiding potential contributors on how to engage with the project effectively. A CONTRIBUTING.md file outlines the contribution guidelines, coding standards, and procedures for submitting pull requests, thus streamlining the contribution process and ensuring consistency across contributions.

Could you please assign this issue to me under GSSOC 24.

Add Code of Conduct

We recommend that every repo has a code of conduct. If you donโ€™t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Sample: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/CODE_OF_CONDUCT.md

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.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

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 your

Learn.md

Learn repos should have a LEARN.md file to teach student 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

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. ๐Ÿ‘

BUG: Mobile Navbar missing

Describe the bug
On opening the website on mobile resolution, the navbar goes missing.

image

No navbar found in mobile.
Assign this issue to me under GSSoC.

Improve Appearance and Fix Horizontal Overflow in About Page

Issue: Improve Appearance and Fix Horizontal Overflow in About Page

Screenshot 2024-05-11 185454

Description

The current state of the About Us page needs enhancement to improve its visual appeal and address horizontal overflow issues. Currently, the layout seems unattractive and causes horizontal scrolling, which impacts user experience negatively.

Expected Behavior

  • The About Us page should have a visually appealing layout.
  • The content should be well-structured and easy to read.
  • Horizontal overflow issues should be fixed to prevent unnecessary scrolling.

Tasks

  1. Design Improvement:

    • Enhance the visual design of the About Us page to make it more aesthetically pleasing.
    • Optimize the layout to ensure it looks visually balanced and professional.
  2. Content Organization:

    • Review and reorganize the content to make it more concise and engaging.
    • Ensure that the information is presented in a clear and structured manner.
  3. Fix Horizontal Overflow:

    • Identify the elements causing horizontal overflow.
    • Adjust CSS styles or layout properties to prevent horizontal scrolling.

Additional Information

  • The About Us page is a critical component of our website, as it provides visitors with information about our organization, team members, and mission.
  • Improving the appearance and functionality of this page will enhance the overall user experience and reflect positively on our brand image.

Priority

Medium

Labels

enhancement, design, usability

Assignee

[Assignee's GitHub Username]

Milestone

[Milestone Name or Version]

Add Favicons to Website

Title: Feature Request: Add Favicons to Website

Issue Description:

Currently, our React website lacks favicon, which are essential for enhancing user experience, branding, and recognition. Favicon provide a visual identifier for our website, appearing in browser tabs, bookmarks, and other user interface elements. Adding favicons to our React website will contribute to a more polished and professional appearance while improving usability for our visitors.

Favicon link : Link

Update About Page to Contributor Page

Update About Page to Contributor Page

Description:

Transform the About page into a Contributor page using Material UI or CSS to display contributor details fetched from the GitHub API (https://api.github.com/repos/MAVRICK-1/e-commerce_website/contributors). Clicking on a contributor card will redirect to their GitHub profile.

Proposed Solution:

  1. Utilize Material UI or CSS for styling contributor cards.
  2. Integrate GitHub API to fetch contributor data dynamically.
  3. Design card layout to showcase contributor details.
  4. Implement functionality to link contributor cards to their GitHub profiles.
  5. Ensure responsiveness for optimal viewing experience.

Assignee:

Responsible team member with Material UI or CSS expertise will be assigned.

Labels:

  • Enhancement
  • GitHub API
  • Material UI
  • CSS
  • Contributor Page

Sub text UI improvements

Describe the bug
Screenshot_2024-05-11-11-16-24-25_40deb401b9ffe8e1df2f1cc5ba480b12
As you can see here, the text is not attractive and bold enough.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the home page
  2. Click on the triple lines at top
  3. Scroll down to Shop section
  4. Click there

Expected behavior
The text should be alluring and bold enough that a person shows their attention to it.
Screenshots
Screenshot_2024-05-11-11-16-24-25_40deb401b9ffe8e1df2f1cc5ba480b12

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version latest

Smartphone (please complete the following information):

  • Device: OnePlus 11R
  • OS: OxygenOS 14
  • Browser Chrome
  • Version latest

Additional context
Please assign this issue to me, I've participated in several projects and will produce the optimised code in here too.

Girlscript Summer of Code Introduction/Tracking

๐Ÿ‘‹ Hi @MAVRICK-1,

I am Prince,web developer(Core Team) 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:

Nav bar: Blog Section can be added and "browse all categories" can have functionality

Is your feature request related to a problem? Please describe.
In our navigation bar, "Browse all categories" button doesn't have any functionality. Clicking on it does nothing. And "blog" also is not taking the users anywhere.

Describe the solution you'd like
I want to add functionality to "Browse all categories" button, so that a dropdown appears listing all the category of items or services we are presenting.
And I want to redirect the user from "Blog" to a page where blogs are there that represents our initiatives or our services and our future expansions.

Additional context
I would prefer to use "alpine.js" for dropdown but I can do it through react too... if you're concerned with alpine.js

feat : Implement forget password

Description:

The application currently lacks the "Forgot Password" feature, which is crucial for user account recovery. This issue is to implement the necessary pages and functionality required for the "Forgot Password" feature.

Tasks:

  1. Create Forgot Password Page: Develop a new page or modal for the "Forgot Password" functionality.

    • Steps to Implement:
      1. Design the user interface for entering email addresses for password reset requests.
      2. Implement the frontend components for the Forgot Password page/modal.
    • Expected Behavior: Users should be able to access the Forgot Password page/modal to initiate the password reset process.
  2. Backend Logic for Password Reset: Develop backend logic to handle password reset requests and send reset instructions to the user's email.

    • Steps to Implement:
      1. Define API endpoints or backend routes to handle password reset requests.
      2. Implement logic to generate and store password reset tokens securely.
      3. Integrate with email services to send password reset instructions to users.
    • Expected Behavior: Upon submitting a password reset request, users should receive instructions on how to reset their passwords via email.

Create Learn.md File for Project Guide

Create Learn.md File for Local Project Build Guide

Description

To enhance the accessibility and usability of our project, let's create a learn.md file that provides a detailed guide on how to build the project locally. This guide will complement the information already available in the README.md file, offering users a step-by-step walkthrough of the local deployment process.

Key Points

  • Introduction: Introduce the project and its purpose.
  • Prerequisites: Outline the requirements for building the project locally.
  • Step-by-step Guide: Provide detailed instructions for cloning the repository, navigating to the project directory, installing dependencies, building the application, starting the development server, and accessing the application.
  • Conclusion: Wrap up with congratulations and encouragement for users who successfully complete the local build process.

Objective

The aim of this task is to assign a contributor to create the learn.md file based on the provided outline. The file will serve as a valuable resource for users, especially those new to the project, by guiding them through the process of building the project locally.

Collaboration

Contributors with experience in creating documentation and familiarity with the project's build process are encouraged to participate in this task. Let's collaborate to provide users with a comprehensive and user-friendly guide for building our project locally.

Feedback

Your feedback or suggestions regarding the content and format of the learn.md file are welcome to ensure it aligns with our goals and objectives.

Thank you for your attention to this matter, and let's work together to improve the accessibility of our project!

Adding the cart functionality and making dedicated My Account page

Is your feature request related to a problem? Please describe.
I would like to work on cart functionality as when user will add something in the cart it will get updated.

Describe the solution you'd like
For making the cart functionality I have to make a "add to cart" button for all the products and whenever user click the button the cart items value will be change and on clicking on the cart icon they will be able to see the selected items through a drawer or on a page. It will also show the total price for the selected items in the end. It will also have a "+" and "-" button to change the number of products they select.

Describe alternatives you've considered
@MAVRICK-1
I am a GSSOC'24 contributor. please assign this to me so that I can work on this. I have worked on similar thing previously.

Additional context
I would also like to work on My account section by adding a dedicated page to see users account detail and users would be able to edit.

priority : high

After making Order Tracking for customers

Is your feature request related to a problem? Please describe.
There is no showing of what is the current status of orders.

Describe the solution you'd like
I would like add a feature where one can track orders.

Describe alternatives you've considered

Additional context
Also maybe addition of notifications can be there.
Please assign me this issue under GSSoC'24.

[ADDITION]: Adding more items in home page

As I can see when we open the website, in the home page most of the items are showing as "loading" which means the items hasn't been added on the website yet. Also in the Featured Category there are only 3 category added.
I can add more items and categories in the Home page.
Please assign me this issue under GSSoC'24.
Thank you!

BUG : Displaying Sign In Page While User Is Already Logged In

Describe the bug
after user successfully logged in into the website the user still access the sign in and sign up page
That user is create a new account or log in with another account still their is logged in

To Reproduce
Steps to reproduce the behavior:

  1. Log in to the website using valid credentials.
  2. After successful login, attempt to access the Sign In page again.
  3. Notice that the Sign In page remains accessible instead of redirecting the user elsewhere.

Expected behavior
A clear and concise description of what you expected to happen.

After the User Logged In Sign in and Sign Up page will not Accessible

Screenshots
ERROR

Please Assign Me this issue , i want to work on this

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

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 must add the tag GSSoC'24, Level 1, Level2, Level 3 good first issue etc.
How we cacluclate the Scores on Leaderboard: Every PR one point
Level 1: 10 points
Level 2: 25 points
Level 3: 45 points
Try to add some documentation issues as well it would be easy for beginner contributor to explore opensource through your repo.
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

Send Email Responsvive Bug

when you switch to mobile the send email is not shown proper

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
this shold be resonsive as per the bottom send email box

Screenshots
Screenshot (54)

Desktop (please complete the following information):

  • OS: [Window 11 ]
  • Browser [ chrome]
  • Version [ 124.0.6367.201 ]

Smartphone (please complete the following information):

  • Device: [Realme 8]
  • OS: [ Android]
  • Browser [crome]
  • Version [124.0.6367.201 ]

Additional context

anchor tag used without styling and browse all the catagory drop down is not woking

Describe the bug
A clear and concise description of what the bug is.

At the navbar cart the anchor tag is not styled and Browse all the category dropdown is not working
To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
image

video-
https://github.com/MAVRICK-1/e-commerce_website/assets/125277258/d950b2e2-f643-4643-9248-67f2c61360d0

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Search bar is not responsive

Search bar in not responsive which is not look good. Can you assign this issue to me.

Screenshots

Recording.2024-05-11.174241.mp4

[Feat] : Login state on Redux

Description

The state is stored on localstorage, it will be stored on redux store which will reduce the prop drilling and increase the security.

image

Enhance the carousel

carousel enhance the overall appeal of the site.

ADD more images and make the carousel autoplay after some seconds.

adding more slides

Migrate Cart Database from Realtime Database to Firestore

Issue: Migrate Cart Database from Realtime Database to Firestore

Description

The current implementation of the cart database relies on a Realtime Database, which has served its purpose well. However, to leverage the benefits of scalability, improved querying capabilities, and real-time updates offered by Firestore, it's essential to migrate the cart database to Firestore.

Expected Behavior

  • The cart functionality should remain intact after the migration.
  • Users should be able to add, remove, and update items in their cart without any disruption.
  • The migration process should be seamless, with minimal downtime for the cart functionality.

Tasks

  1. Data Migration:

    • Export existing cart data from the Realtime Database.
    • Import the exported data into Firestore, ensuring data integrity and consistency.
  2. Code Refactoring:

    • Modify existing code to interact with Firestore instead of the Realtime Database.
    • Update database read and write operations to use Firestore APIs.
  3. Testing and Validation:

    • Conduct thorough testing to verify that the cart functionality works as expected with Firestore.
    • Validate data consistency and accuracy between the old and new database systems.
  4. Performance Optimization:

    • Optimize Firestore queries and indexing to ensure efficient performance, especially during high traffic periods.

Additional Information

  • Firestore offers several advantages over Realtime Database, including better scalability, real-time updates, and more advanced querying capabilities.
  • Migrating the cart database to Firestore aligns with our goal of modernizing our infrastructure and improving the overall performance of our application.

Priority

High

Labels

database, migration, firestore

[Bug] - The search bar in Hero section is overflowing.

Description

The search bar in hero section of the website is looking fine. But in mobile version the size of the search bar is not optimized and it overflows to the right of the website.

Steps to Reproduce

  • Open on mobile to view the bug.

Screenshots -

image

Priority

High

Labels

bug, enhancement, UI/UX, GSSoC'24.

I would love to work on this issue and contribute to it as GSSoC'24 contributor. Looking forward to you reply.

ADDING BLOG AND CONTACT PAGE CONTENT

Is your feature request related to a problem? Please describe.
There is no page attach to blog and contact page
Describe the solution you'd like
I can add those pages like adding necessary details in contact page and cards in blog pages for blog

Bug in About us page

Describe the bug
Bug in About us page it working fine in local server but not in vercel.

Expected behavior

All images in about us page should work properly.

@MAVRICK-1 can you please assign this to me.

Responsive Ui Design for about us contributors details card

Is your feature request related to a problem? Please describe.
in the about us page the in our contributors section the contributors card ui is decent where i want to update that ui in to the proper profile card and also their bug in the css where the x axis is overflow in the page

Describe the solution you'd like
A clear and concise description of what you want to happen.

making an interactive card ui design with the proper contributors details and related links

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Screenshot 2024-05-11 230954

see the bottom right corner where the page is overflow and get the horizontal line on it

please assign this issue to me , i want to work on this issue

Featured catagries cards setup

In the "Featured Categories" section, there are three different categories: groceries, electronics, and fashion. However, the "Groceries" card is not aligned with the other two cards, and it lacks a hover effect. This inconsistency affects the overall appearance of the UI i mean there should hover on only one card which we are focusing
cone
.

Title: Implement ESLint

Title: Implement ESLint

Issue Description:

As our React project grows, maintaining code quality becomes increasingly important. One way to ensure consistent code style and catch potential errors early is by implementing ESLint. ESLint is a widely used tool that helps enforce coding standards and identify common programming mistakes.

By integrating ESLint into our project, GitHub contributors will benefit from automatic code linting and error highlighting directly within their development environments. This will streamline the code review process, improve code readability, and foster better collaboration among team members.

This issue involves configuring ESLint for our React project, defining coding standards and rules tailored to our codebase, and providing documentation on how contributors can set up ESLint in their local development environments.

Additional Information:

  • Our project uses React for front-end development.
  • We aim to improve code quality and consistency through the implementation of ESLint.
  • Feel free to ask questions or seek clarification on any aspect of this issue.

Migrate Product and Seller Registration Form Data Storage from Realtime Database to Firestore in Firebase

Title: Migrate Product and Seller Registration Form Data Storage from Realtime Database to Firestore in Firebase

Issue Description:

Our current solution for storing data from product and seller registration forms relies on Firebase Realtime Database. However, we recognize the benefits of migrating to Firestore, Firebase's scalable and feature-rich NoSQL database.

Migrating our data storage to Firestore will improve scalability, provide better querying capabilities, and offer real-time updates, ensuring a more robust and future-proof solution for our platform.

This issue involves migrating the backend logic of our registration forms to interact with Firestore instead of the Realtime Database. It also requires updating relevant client-side code to communicate with Firestore endpoints.

Documentation of Firestore : Firestore

Tasks:

  • Research Firestore database structure and data modeling best practices.
  • Plan the migration strategy, including any necessary data schema changes.
  • Update client-side code to send data to Firestore endpoints.
  • Thoroughly test the migration to ensure data integrity and functionality.
  • Update documentation to reflect the changes made and provide guidance for future development.
  • Coordinate with the backend and frontend teams to ensure a smooth transition.

Additional Information:

  • Our backend is built using Firebase Functions.
  • The frontend of our product and seller registration forms is developed using React.
  • The assignee will be granted access to the Firebase console for managing Firestore.
  • Feel free to ask questions or seek clarification on any aspect of this issue.

Add Form Control to Sign-in and Sign-up Pages

Add Form Control to Sign-in and Sign-up Pages

Screenshot 2024-05-11 001014

Description

To enhance user experience and ensure data integrity, I propose adding form control to the sign-in and sign-up pages of our application. With this enhancement, the submit buttons will remain disabled until the required fields receive input values.

Key Points

  • Sign-in Page: Add form control to the sign-in page.
  • Sign-up Page: Add form control to the sign-up page.
  • Field Validation: Implement validation to ensure that the submit buttons remain disabled until all required fields have valid input values.

Objective

The objective of this issue is to assign a contributor to implement form control on the sign-in and sign-up pages, ensuring that users cannot submit the form until they have provided valid input for all required fields. This enhancement will improve the user experience by guiding users to input the necessary information correctly.

Collaboration

Contributors with experience in frontend development and familiarity with form validation techniques are encouraged to participate in this task. Let's collaborate to enhance the functionality and usability of our sign-in and sign-up pages.

Feedback

Your feedback or suggestions regarding the implementation of form control on the sign-in and sign-up pages are welcome to ensure that we meet the needs of our users effectively.

Thank you for your attention to this matter, and let's work together to improve our application!

Display Success Message and Redirect User After Sign Up

Issue: Display Success Message and Redirect User After Sign Up

Description

Currently, upon successful sign-up, the user is not provided with any indication that their account creation was successful, nor are they redirected to the sign-in page. We need to implement a feature to display a success message in a modal dialog to the user after they successfully sign up. Additionally, upon closing the modal, the user should be redirected to the sign-in page.

Implementation

We will utilize Material-UI's Dialog component to create a modal dialog for displaying the success message. Upon successful sign-up, we will trigger this modal to appear, informing the user that their account has been created successfully and prompting them to sign in. Upon closing the modal, the user will be redirected to the sign-in page using React Router's useHistory hook.

Steps to Implement

  1. Define State for Modal: Create state variables to manage the visibility of the success modal.
  2. Display Modal: Implement a modal dialog using Material-UI's Dialog component to display the success message.
  3. Close Modal and Redirect: Provide options to close the modal and redirect the user to the sign-in page upon clicking the "Sign In" button.
  4. Update Sign-Up Function: After successful user sign-up, trigger the modal to appear.
  5. Use useHistory for Redirection: Utilize React Router's useHistory hook to redirect the user to the sign-in page.

Material-UI Dialog Documentation

You can refer to the Material-UI documentation for more information on how to use the Dialog component:
Material-UI Dialog Documentation

Code Changes

// Inside SignUp component
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
import { useHistory } from 'react-router-dom';

// Define state variables for success modal and useHistory hook
const [showSuccessModal, setShowSuccessModal] = useState(false);
const history = useHistory();

// Function to handle successful sign-up
const handleSignUpSuccess = () => {
    setShowSuccessModal(true); // Trigger success modal
};

// Function to close modal and redirect to sign-in page
const handleCloseModalAndRedirect = () => {
    setShowSuccessModal(false);
    history.push('/signIn'); // Redirect to sign-in page
};

// Inside signUp function after user successfully signs up
.then((userCredential) => {
    setShowLoader(false);
    setFormFields({
        email: '',
        password: '',
        conformPassword: ''
    });
    handleSignUpSuccess(); // Trigger success modal
})

// Implement Modal to display success message and redirect
<Dialog
    open={showSuccessModal}
    onClose={handleCloseModalAndRedirect}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
>
    <DialogTitle id="alert-dialog-title">{"Account Created Successfully!"}</DialogTitle>
    <DialogContent>
        <DialogContentText id="alert-dialog-description">
            Your account has been created successfully. You can now sign in.
        </DialogContentText>
    </DialogContent>
    <DialogActions>
        <Button onClick={handleCloseModalAndRedirect} color="primary" autoFocus>
            Sign In
        </Button>
    </DialogActions>
</Dialog>

Testing

1. Perform a sign-up process with valid credentials.

Ensure you have valid credentials ready for sign-up.

2. Verify that upon successful sign-up, a modal dialog appears with the success message.

  • Complete the sign-up process with valid credentials.
  • After successful sign-up, verify that a modal dialog appears on the screen.
  • Confirm that the modal displays the success message indicating that the account has been created successfully.

3. Confirm that the modal dialog provides an option to redirect to the sign-in page.

  • In the modal dialog, check for an option/button labeled "Sign In".
  • Ensure that this option is clearly visible and clickable.

4. Clicking on "Sign In" in the modal should redirect the user to the sign-in page.

  • Click on the "Sign In" button within the modal dialog.
  • Verify that upon clicking, the modal closes, and the user is redirected to the sign-in page.

5. Ensure the modal does not appear if sign-up fails or if the user closes it manually.

  • Attempt to sign up with invalid credentials or by leaving required fields blank.
  • Verify that the modal does not appear upon failed sign-up attempts.
  • Manually close the modal if it appears after successful sign-up and confirm that it does not reappear.

Profile Image Not Displaying Upon Sign-in

Issue Title

Profile Image Not Displaying Upon Sign-in

Screenshot 2024-05-09 223848

Issue Description

Upon signing in, users are encountering an issue where their profile image fails to display correctly. Currently, the profile image is not showing up for users who sign in using their email and password. However, users signing in via Google authentication are able to see their Google profile image as expected.

Expected Behavior

  • When a user signs in using their email and password, their profile image should be displayed.
  • When a user signs in using Google authentication, their Google profile image should be displayed.

Steps to Reproduce

  1. Navigate to the sign-in page.
  2. Enter valid credentials (email and password) and sign in.
  3. Observe that the profile image is not displayed.

Proposed Solution

  • For users signing in using email and password authentication, display a default SVG image.
    icons8-user

  • For users signing in via Google authentication, retrieve and display their Google profile image.

Priority

High

Labels

bug, enhancement, authentication

Cart notification

Describe the bug
when you added a item to card item added but card notification not increase it not mark as something added

To Reproduce
Steps to reproduce the behavior:

  1. Go to ' item'
  2. Click on 'add.'
  3. Scroll up to 'cart'
  4. See error

Expected behavior
after adding item it notification cout should be increase

Screenshots
Screenshot (56)

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Feature Request: Day and Night Mode

Feature Request: Day and Night Mode

Problem Description

The current website lacks a day and night mode feature, which can be inconvenient for users who prefer different display settings depending on the time of day or their personal preferences.

Proposed Solution

Introduce a day and night mode feature on the website built with React.js to allow users to switch between light and dark modes easily. This feature would enhance the browsing experience by providing users with a more comfortable viewing environment.

Alternatives Considered

One alternative solution could be to rely on browser extensions or third-party software to enable day and night mode. However, integrating this feature directly into the React.js application would offer a more seamless experience for users.

Additional Context

  • Adding a day and night mode feature can enhance accessibility and user experience.
  • It can cater to a wider range of preferences and needs among users.
  • Dark mode can reduce eye strain, especially during nighttime browsing sessions.

Action Steps

  1. Design and implement React components for toggling between day and night mode.
  2. Utilize state management solutions like React Context or Redux to manage the current theme state.
  3. Develop functionality to dynamically switch between light and dark themes based on user preference.
  4. Test the feature within your React application, ensuring compatibility with different browsers and devices.

Create Simple Video Guide for Local Deployment of React Application

Create Simple Video Guide for Local Deployment of React Application

Description

To streamline the process of building and deploying our React application locally, I propose the creation of a concise and straightforward video guide. This guide will focus on providing users with a quick overview of the essential steps required to build and run the application on their local machine.

Key Points

  1. Introduction: Introduction to the React application and its purpose.
  2. Cloning the Repository: Cloning the project repository from GitHub.
  3. Navigating to Project Directory: Navigating to the project directory in the terminal/command prompt.
  4. Installing Dependencies: Installing project dependencies using npm or yarn.
  5. Building the Application: Running the build script to compile the application.
  6. Starting the Development Server: Starting the development server to view the application in a web browser.
  7. Verification: Verifying the functionality of the application.

Objective

The aim of this video guide is to provide users with a clear and concise walkthrough of the local deployment process, enabling them to quickly get up and running with the React application. The emphasis will be on simplicity and brevity, making it accessible to users of all skill levels.

Collaboration

Contributors with experience in creating instructional videos and familiarity with React development are encouraged to participate in this task. Let's collaborate to create a valuable resource that enhances the accessibility and usability of our React application for all users.

Feedback

Your feedback and suggestions for improving the content and format of the video guide are highly appreciated. Let's work together to make the local deployment process as straightforward as possible for our users.

Migrated cart data retriving from Firestore

Fix the Retrieving data from firestore.

Description

Previously implementation of the cart database relies on a Realtime Database, It has been Migrated to Firestore. We have to retrieve the data from firestore.

Expected Behavior

  • Make Sure CURD Operations work smoothly and fine.
  • Make sure the curd operation changes reflect on the website.

Change Page title

Hello @MAVRICK-1

Your page title looking like default React App and favicon also default one.

Screenshot 2024-05-11 181824

Please assign this issue to me
Let me change page title as project name and favicon as well.

Thanks in advance

Redirect to mail when clicking the mail and redirect to teliphone number when clicking to the number

Is your feature request related to a problem? Please describe.
I'm always frustrated when to contact the number is want to type and the mail want ot write in the gmail

Describe the solution you'd like
actually i want to adding this feature
https://github-production-user-asset-6210df.s3.amazonaws.com/135215478/294624719-b070bd43-719b-456f-9997-a409a1f146b7.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240512%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240512T141956Z&X-Amz-Expires=300&X-Amz-Signature=646d8590bc0a531e0201860a8393d86e719c00c90b00cf872d1d59502486e1d5&X-Amz-SignedHeaders=host&actor_id=135215478&key_id=0&repo_id=710269032

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

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.