Virtual Expo 2024

GO LOCAL!

Year Long Project CompSoc

                                                            

 

GoLocal is an innovative local shop app designed to enhance convenience and efficiency in the shopping experience. By leveraging location tracking technology and a comprehensive shop database, users can effortlessly explore nearby shops, check item availability, and make informed decisions without physically visiting each store.

 

Aim:

The aim of the GoLocal app is to revolutionize the local shopping experience by providing users with a convenient platform to explore nearby shops, check item availability, and make informed decisions without the need to physically visit each store. It aims to enhance convenience, improve efficiency, promote local businesses, and foster community engagement through innovative features and user-friendly interface.

 

Introduction:

In today's bustling society, characterized by hectic schedules and ever-evolving technology, the quest for convenience has become a driving force behind consumer behaviour. Recognizing this trend, the GoLocal app emerges as a transformative solution, poised to revolutionize the way individuals engage with their local shopping landscape. By seamlessly bridging the gap between users and nearby establishments, this innovative platform offers a streamlined approach to exploring products, assessing availability, and making informed purchasing decisions. Through its commitment to promoting local businesses, fostering community interaction, and prioritizing user convenience, the GoLocal app stands at the forefront of a new era in retail engagement. In this report, we delve into the aims, methodologies, and outcomes of this groundbreaking endeavour, highlighting its potential to redefine the shopping experience for consumers and businesses alike.

 

 

Methodology:

Use of MERN stack in GoLocal:

The GoLocal project harnesses the power of the MERN stack—MongoDB, Express, React, and Node.js—to construct a cutting-edge local shop application that redefines the shopping experience for users. Here's how each component of the MERN stack contributes to the GoLocal project:

 

1. MongoDB:

MongoDB serves as the foundation of the GoLocal application, providing a robust NoSQL document-based database for storing crucial information such as user profiles, shop data, item availability, and user interactions. With its flexible schema, MongoDB enables seamless storage and retrieval of unstructured data, facilitating efficient management of diverse content submitted by users.

2. Express:

Express.js forms the backend framework of the GoLocal application, powering the server-side functionality. By leveraging Express, GoLocal efficiently handles HTTP requests and responses, manages middleware, and interfaces with the MongoDB database. Express serves as the backbone for implementing core features such as user authentication, shop listings, and real-time updates, ensuring smooth communication between the frontend and backend components.

 

3. React:

React plays a pivotal role in crafting the dynamic user interfaces of the GoLocal application. With its component-based architecture, React enables the creation of reusable UI elements, facilitates state management, and facilitates seamless DOM updates. Through React, GoLocal delivers an intuitive and responsive frontend experience, allowing users to explore nearby shops, view item availability, and interact with the platform's features effortlessly.

 

4. Node.js:

Node.js serves as the runtime environment for the server-side logic of the GoLocal application. By harnessing the power of Node.js, GoLocal efficiently handles server-side requests, communicates with the MongoDB database, and orchestrates interactions with the React-based frontend. Node.js ensures the scalability, performance, and responsiveness of the GoLocal platform, enabling seamless execution of business logic and real-time updates.

By leveraging the strengths of the MERN stack, GoLocal epitomizes innovation in local shopping, offering users a convenient, efficient, and engaging platform to discover nearby shops, access product information, and connect with their community. The cohesive integration of MongoDB, Express, React, and Node.js empowers GoLocal to deliver a seamless shopping experience that meets the diverse needs of its users, driving engagement and fostering growth within local businesses.

 

• JWT Authentication:

In the GoLocal project, JWT (JSON Web Tokens) authentication is implemented to secure endpoints and ensure that only authenticated users can access protected resources. Here's how JWT authentication is utilized in the project:

- User authentication: When a user logs in to the GoLocal application, their credentials, such as email and password, are validated by the server. Upon successful validation, a JWT containing information about the user's identity is generated and returned to the client. The JWT is signed with a secret key to prevent tampering.

- Token verification: Whenever a user makes a request to a protected endpoint, such as viewing their profile or accessing shop details, the client sends the JWT in the Authorization header. The server verifies the JWT's signature and decodes its payload to extract the user's identity. If the JWT is valid, the server grants access to the protected resource.

- Token expiration: JWTs in the GoLocal project are set to expire after a specified period, such as one hour. This ensures that even if a JWT is compromised, it will only be valid for a limited time, enhancing security.

- Refresh token: In addition to JWTs, GoLocal utilizes refresh tokens to maintain user sessions. When a JWT expires, the client can send a refresh token to the server to obtain a new JWT without requiring the user to log in again. Refresh tokens are securely stored in the database and can be revoked if necessary.

By incorporating JWT authentication, GoLocal ensures a secure and reliable mechanism for users to access protected resources within the application, promoting trust and confidence among users.

 

• Backend using Express and Node.js:

In the GoLocal project, MongoDB serves as the primary database for storing user information, shop data, and other relevant details. To establish connectivity between the MongoDB database and the backend, Express.js and Node.js are employed.

Node.js, a JavaScript runtime environment, forms the backbone of the backend development process in GoLocal, enabling the creation of scalable network applications. Express.js, a popular framework built on top of Node.js, provides a range of features for developing web applications and APIs.

Express.js handles various aspects of web development, including HTTP requests, routing, middleware implementation, and other web-related functionalities. It streamlines the process of building robust backend services for the GoLocal application.

To interact with the MongoDB database seamlessly, the backend server utilizes the Mongoose library. Mongoose serves as an Object Data Modelling (ODM) tool, offering a structured schema-based approach to interact with MongoDB. Developers can define models, schemas, and perform CRUD operations efficiently using Mongoose, enhancing the backend development experience for the GoLocal project.

 

IMPLEMENTATION:

 

• Login Page:

In the project, the login page serves as the gateway for users to access the application. Here's an overview of the implementation:

The login page is defined in the LoginPage.js file within the src/components/auth directory. It consists of an HTML form with input fields for the user's email and password, along with a submit button to initiate the login process. Upon submission, the handleSubmit function in LoginPage.js orchestrates the form data submission by triggering a POST request to the backend API, passing the user's email and password as parameters.

The backend handles the login functionality within the auth.js file located in the routes directory. It defines a /login API endpoint that listens for incoming POST requests from the frontend. Upon receiving a request, the authController.login function is invoked to verify the user's credentials. If the credentials are valid, a JSON Web Token (JWT) is generated using the jsonwebtoken library, signifying successful authentication. This token is then sent back to the frontend as a response.

Upon receiving the JWT, the frontend stores it securely in the local storage. Subsequent requests to protected routes include this token in the request header for authentication purposes. The backend validates the token using the jsonwebtoken library, ensuring its authenticity and integrity. If the token is valid, access to the requested resource is granted, allowing the user to navigate within the application seamlessly.

Overall, the login page implementation adheres to standard web development practices, enabling secure authentication while ensuring a smooth user experience.

 

• Sign Up Page:

The sign-up page in the GoLocal project enables users to create new accounts and access the application's features. Here's how it is implemented:

Defined in the SignupPage.js file within the src/components/auth directory, the sign-up page presents an HTML form with input fields for the user's name, email, password, and password confirmation. The handleSubmit function orchestrates the form submission process by sending a POST request to the backend API, containing the user's sign-up data.

The backend handles sign-up functionality within the auth.js file in the routes directory. It defines a /signup API endpoint to handle incoming POST requests from the frontend. Upon receipt, the authController.signup function is invoked to create a new user record in the database using the provided sign-up data. The user's password is securely hashed using the bcrypt library before being stored in the database for enhanced security.

Upon successful user creation, the authController.login function generates a JWT for the newly registered user. This token is returned to the frontend as part of the response. Similar to the login flow, the frontend stores this token securely in local storage for future authentication requests.

In summary, the sign-up page enables seamless user registration while adhering to best practices for data security and authentication in web applications.

 

• Real-time Chat using Socket.io:

In the GoLocal project, Socket.io is employed to facilitate real-time communication between shopkeepers and users through a chat feature. Here's an elaboration on how Socket.io is utilized for real-time chat functionality:

Socket.io integration: Socket.io is a JavaScript library that enables real-time, bidirectional communication between web clients and servers. It utilizes WebSocket technology to establish a persistent connection between the client and server, allowing for instant data transmission.

Establishment of WebSocket connection: When a user initiates a chat session with a shopkeeper or vice versa, Socket.io establishes a WebSocket connection between the client-side application (web browser) and the server-side backend. This connection remains open throughout the duration of the chat session.

Broadcasting messages: Once the WebSocket connection is established, Socket.io facilitates the exchange of messages in real-time. When a user sends a message to the shopkeeper or vice versa, Socket.io broadcasts the message to all connected parties involved in the chat session, ensuring that the communication remains synchronous and instantaneous.

Handling message events: Socket.io defines custom events for message handling, such as 'sendMessage' and 'receiveMessage'. When a user sends a message, the client-side application emits a 'sendMessage' event along with the message content. The server-side backend listens for this event and broadcasts the message to all relevant parties by emitting a 'receiveMessage' event. The client-side applications then handle the 'receiveMessage' event to display the received message in real-time.

Enhanced user experience: By leveraging Socket.io for real-time chat functionality, the GoLocal project enhances the user experience by providing a seamless and interactive communication platform. Users can engage in instant conversations with shopkeepers, inquire about product availability, seek assistance, and receive prompt responses, thereby fostering engagement and satisfaction.

 

• Location based shop selection:

The location-based shop selection feature in the GoLocal project provides users with a seamless and efficient way to explore nearby businesses based on their chosen location. Through an intuitive user interface integrated with geolocation services, users can input their desired location and view nearby shops within a specified radius. The backend proceses location data and performs geospatial queries to retrieve relevant shop information, which is then displayed to users along with additional filtering and sorting options. Efforts are made to ensure the accuracy and precision of geolocation data, with optimizations implemented to enhance performance and minimize latency. Overall, this feature enhances convenience for users, promotes local businesses, and fosters community engagement by facilitating informed decision-making and personalized shop recommendations.

 

•Shopkeeper Landing page:

The shopkeeper landing page in GoLocal serves as a central hub for efficient shop management, providing a user-friendly dashboard where owners can effortlessly oversee their businesses. From this intuitive interface, shopkeepers can seamlessly navigate through their shops, access vital information, and manage inventory with ease.

One of the key features of the landing page is the ability to add new shops to the platform. Shopkeepers can easily input relevant details about their stores, such as location, contact information, and operating hours, allowing them to quickly establish their presence within the app.Additionally, the landing page enables shopkeepers to update their inventory in real-time. Whether it's adding new products, adjusting quantities, or modifying prices, shop owners have full control over their stock, ensuring that customers always have access to the latest offerings.

 

Another crucial aspect of the landing page is its built-in stock monitoring functionality. Shopkeepers can track inventory levels, receive alerts for low stock items, and generate reports to gain insights into sales trends and product performance. This helps them make informed decisions about restocking and inventory management, ultimately optimizing their operations and maximizing profitability.

Overall, the shopkeeper landing page in GoLocal is a comprehensive platform designed to empower shop owners in optimizing their operations and maximizing productivity. With its user-friendly interface, seamless navigation, and powerful features, it provides a streamlined solution for managing shops effectively in today's competitive market landscape.

 

•Sentiment Analysis:

Incorporating cutting-edge Natural Language Processing (NLP) techniques, GoLocal integrates advanced sentiment analysis algorithms to accurately discern the emotional tone encapsulated within user comments. Through sophisticated machine learning models, comments are meticulously categorized into positive, neutral, and negative sentiments, allowing for a nuanced understanding of user feedback. This robust feature not only elevates the platform's user experience but also serves as a pivotal mechanism for maintaining a harmonious and respectful community environment. Comments flagged as inappropriate are swiftly identified and filtered out, ensuring that the platform remains a safe and welcoming space for all users. Furthermore, negative comments are systematically stored and presented to shopkeepers for individual review, empowering them to proactively address concerns and foster meaningful dialogue with their clientele. By leveraging the power of NLP technology, GoLocal empowers shopkeepers to cultivate strong customer relationships, address feedback constructively, and nurture a vibrant community within the platform.

 

 

Results:

The GoLocal project has delivered exceptional outcomes, redefining the shopping landscape and empowering users and local businesses alike. By seamlessly connecting users with nearby shops, the app has streamlined the shopping experience, saving time and effort while promoting local commerce. Through its user-friendly interface and robust features, GoLocal has facilitated efficient exploration of shops, enhanced convenience, and fostered community engagement. Overall, the project has successfully achieved its objectives, revolutionizing the way users interact with local businesses and elevating the shopping experience for all stakeholders involved.

 

 

Conclusion:

Our extensive project on GoLocal has revolutionized the way users engage with local businesses, offering a seamless platform for discovering nearby shops, checking item availability, and making informed decisions. By prioritizing convenience and efficiency, GoLocal has successfully bridged the gap between users and local businesses, empowering both parties to thrive in a digital era. Through features like comprehensive shop databases, real-time updates, and user-friendly interfaces, GoLocal fosters community engagement while promoting local commerce. Our journey with GoLocal has equipped us with valuable insights into full-stack web development, API integration, and user authentication, offering a rich learning experience for aspiring developers. With a focus on enhancing the local shopping experience and fostering a sense of community, GoLocal represents a significant step towards redefining how users interact with local businesses and contribute to their growth.

 

 

REFERENCES:

1. HTML, CSS, and Javascript

2. Javascript

3. React Documentation

4. React Crash Course Project

5. Api call in react

6. React-axios

7. https://developers.google.com/maps/documentation

 

 

Report Information

Explore More Projects

View All 2024 Projects