Complete Process of Starting a Next.js Project Cloned from GitHub

Step 1: Clone the Repository

1. Open a terminal and run the following command:

   git clone <REPO_URL. Get >
   cd <PROJECT_NAME>

Step 2: Install Dependencies

Run the following command in the project directory to install all required dependencies:

npm install

Step 3: Create the .env File

1. If the repository includes an .env.example file, use it as a reference:

   cp .env.example .env

2. If not, create a new .env file:

   touch .env

3. Add all the required environment variables with appropriate keys and values.

Step 4: Obtain API Keys and Secrets

Follow the steps below to extract the necessary keys and secrets for the platforms mentioned in your .env file:

---

1. Cloudinary

• Steps to Get CLOUDINARY_SECRET, API_KEY, and CLOUD_NAME:
  1. Log in to your Cloudinary account at cloudinary.com.
  2. Navigate to the Dashboard.
  3. Under "Account Details," find:
     • CLOUD_NAME
     • API_KEY
     • API_SECRET (use as CLOUDINARY_SECRET).

---

2. MongoDB Atlas

• Steps to Get MONGO_URI:
  1. Log in to MongoDB Atlas.
  2. Go to Database Deployments and select your cluster.
  3. Click Connect > Connect Your Application.
  4. Copy the connection string (mongodb+srv://...) and replace <username> and <password> with your credentials.

---

3. NextAuth

• Steps to Get NEXTAUTH_SECRET:
  1. Use any secure random string generator, such as OpenSSL:

     openssl rand -base64 32

  2. Copy the generated string as your NEXTAUTH_SECRET.

---

4. PayPal

• Steps to Get PAYPAL_CLIENT_ID and PAYPAL_CLIENT_SECRET:
  1. Log in to your PayPal Developer Dashboard.
  2. Go to My Apps & Credentials > REST API Apps.
  3. Create or select an app.
  4. Copy the Client ID and Secret for the app.

---

5. Stripe

• Steps to Get STRIPE_SECRET_KEY and STRIPE_PUBLIC_KEY:
  1. Log in to Stripe Dashboard.
  2. Go to API Keys under the Developers section.
  3. Copy the Secret Key and Publishable Key.

---

6. Tax and Shipping Prices

• Set static values for TAX_PRICE and SHIPPING_PRICE as per your requirements.

---

Step 5: Run the Development Server

Once the .env file is set up with all the required variables, start the development server:

npm run dev

Step 6: Access the Application

Open your browser and visit:

http://localhost:3000

---

Tips for Managing Environment Variables

1. Use dotenv in Development: Ensure your project supports .env files (Next.js supports them by default).
2. Secure Keys in Production: Avoid committing .env files to your repository. Use deployment platforms like Vercel or AWS to securely manage secrets in their environment configuration settings.

Bonus: Sync .env Variables Automatically

For large projects with multiple contributors, use tools like Doppler or Vault to manage secrets securely.