Giter Club home page Giter Club logo

react-fitness's Introduction

Fit & Fun Web Application

This repository contains the source code for the Fit & Fun web application, a fitness and diet planner built with the MERN stack. The app features user authentication, a workout planner, a diet planner, and email functionality for password reset.

Table of Contents

Prerequisites

Before you begin, make sure you have the following software installed on your machine:

  • Node.js (v14 or above)
  • npm (comes with Node.js)
  • MongoDB (either locally or using a cloud service like MongoDB Atlas)

Project Setup

Client Setup

  1. Navigate to the client directory:

    cd client
  2. Install the required dependencies:

    npm install
  3. Create a .env file in the client directory with the necessary environment variables (if any).

  4. Build the client application:

    npm run build
  5. Start the client development server:

    npm start

Server Setup

  1. Navigate to the server directory:

    cd server
  2. Install the required dependencies:

    npm install
  3. Set up the environment variables as described in the next section.

  4. Start the server:

    npm start

Environment Variables

MongoDB URL

  1. In the server directory, create a .env file if it doesn't already exist.

  2. Add your MongoDB connection string to the .env file:

    MONGODB_URL=mongodb://<username>:<password>@<host>:<port>/<database>
    

    Replace <username>, <password>, <host>, <port>, and <database> with your MongoDB credentials and details.

Email Credentials

  1. Open the server/routes/email.js file.

  2. Update the Nodemailer configuration with your email credentials:

    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: process.env.EMAIL, // your email address
            pass: process.env.PASSWORD, // your app password if using 2FA, otherwise your email password
        },
    });
  3. Add the email credentials to your .env file in the server directory:

    [email protected]
    PASSWORD=your-email-password
    

    If you are using Two-Factor Authentication (2FA), make sure to generate an app-specific password from your Google account settings and use it here.

    Here is a sample mail, how this works

    alt text

Running the Application

  1. Ensure that both the client and server are set up and running.

  2. Open your browser and navigate to http://localhost:3000 to access the application.

  3. Use the application features including user authentication, workout planning, diet planning, and password reset functionality.

  4. The server will run on http://localhost:4000 by default.

react-fitness's People

Contributors

pranithchowdary avatar

Watchers

 avatar

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.