Skip to content

Latest commit

 

History

History
184 lines (139 loc) · 6.44 KB

README.md

File metadata and controls

184 lines (139 loc) · 6.44 KB
Raw

Sportify Header

📗 Table of Contents

📖 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

(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:

  • 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.