📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
• 👥 Authors
• 📝 License

📖 Sportify

Sportify is an innovative web application designed to enhance the experience of sports enthusiasts by providing a platform to explore, compare, and engage with a variety of sports products. Whether you're a professional athlete, a fitness enthusiast, or a casual sports fan, Sportify offers a comprehensive catalog of sports equipment, apparel, and accessories to meet your needs.

🛠 Built With

Tech Stack

Frontend

• React.js: A JavaScript library for building user interfaces. React is used for creating dynamic and interactive web pages, with a component-based architecture that makes the code more reusable and easier to maintain.

Backend

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is used for building fast and scalable server-side applications.
• Express.js: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Express is used for setting up the server and handling routes.

Database

• MongoDB: A NoSQL database program that uses JSON-like documents with optional schemas. MongoDB is used for storing product information and user data.

Middleware

• Axios: A promise-based HTTP client for the browser and Node.js. Axios is used for making API requests to the backend server.
• CORS: Middleware that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated. CORS is used for enabling cross-origin requests.

Authentication

• JWT (JSON Web Token): A compact, URL-safe means of representing claims to be transferred between two parties. JWT is used for securely transmitting information between the client and server as JSON objects.

Styling

• CSS: Used for styling the web pages to ensure a good user experience.
• Bootstrap: A popular CSS framework that helps to create responsive and mobile-first web pages.

Environment Variables

• dotenv: A zero-dependency module that loads environment variables from a .env file into process.env. Used for managing configuration settings.

Additional Tools

• Mongoose: An ODM (Object Data Modeling) library for MongoDB and Node.js. Mongoose provides a straightforward, schema-based solution to model application data.

This tech stack enables Sportify to be a dynamic, interactive, and user-friendly platform for sports enthusiasts, providing robust functionality and a seamless user experience.

Key Features

• Product Catalog
• Product Search
• Product Filtering
• Product Details
• User Comments
• Like/Dislike Comments

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

Before you begin working on the Sportify project, ensure you have the following prerequisites installed and configured:

• Node.js and npm:

  • Node.js: Ensure you have Node.js installed. You can download it from Node.js.
  • npm: Node.js comes with npm (Node Package Manager), which you will use to manage project dependencies.

• MongoDB:

  • Ensure you have MongoDB installed and running. You can download and install MongoDB from MongoDB.

• Git:

  • Ensure you have Git installed for version control. You can download it from Git.

• Code Editor:

  • A code editor like Visual Studio Code (VSCode), Sublime Text, or Atom.

• Postman:

  • A tool for testing APIs. You can download it from Postman.

• Basic Knowledge:

  • Familiarity with JavaScript, React.js, Node.js, Express.js, and MongoDB.
  • Understanding of RESTful APIs and how to interact with them.

Setup

1. Clone the Repository:

   git clone https://github.com/your-username/sportify.git

Navigate to the Project Directory: sh Copy code cd sportify Install Install Backend Dependencies:

sh Copy code cd backend npm install Install Frontend Dependencies:

sh Copy code cd ../frontend npm install Set Up Environment Variables Create a .env file in the backend directory and add the following:

env Copy code PORT=5000 MONGO_URI=your_mongo_database_uri Usage Start the Backend Server:

sh Copy code cd backend npm start Start the Frontend Server:

sh Copy code cd ../frontend npm start Open the Application: Open your browser and navigate to http://localhost:5000.

Explore Features:

Browse and search for products. View detailed product information. Add products to the cart (as a customer). Add, update, or delete products (as an admin). Engage with the community by leaving comments and liking or disliking others' comments.

(back to top)

👥 Authors 👤 Tshwetso K Mokgatlhe

GitHub: @TshwetsoMo Email: [email protected] LinkedIn: Tshwetso K Mokgatlhe 👤 Tristan Storm

GitHub: @TristanStormDesign Twitter: @twitterhandle LinkedIn: Tristan Storm 👤 Jarryd Carelse

GitHub: @githubhandle Twitter: @twitterhandle LinkedIn: Jarryd Carelse

(back to top)

📝 License This project is MIT licensed.

(back to top)

``` Replace "path/to/your/header-image.jpg" with the actual path to your header image file. This updated README should now be properly formatted for your GitHub repository, including a header image at the start.