Team .EXE Website

About The Project

A collaborative effort made by members of team EXE to expand into horizons of world wide web

Built With

• 
• 
• 
• 
• 
• 
• 

Getting Started

Follow the below instructions to run the code.

Prerequisites

• npm
• Node.js

Installation

1. Clone the repo

   git clone https://github.com/anisharma07/EXE-Website-2024.git

2. Change directory

   cd EXE-Website-2024

3. Install NPM packages

   npm install

4. To run the project, run command:

   npm run dev

5. .env setup:

   EMAIL=<Your_Email_Address>
    EMAIL_PASS=<Your_Email_App_Password>
    REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
    REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
    REACT_APP_FIREBASE_DATABASE_URL=your_firebase_database_url
    REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id
    REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
    REACT_APP_FIREBASE_APP_ID=your_firebase_app_id
    REACT_APP_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id

Preview

you can preview the project by going to https://localhost:3000 in your browser

Code Structure

SRC/Components

• ./src/components
  • /Home - to edit the Home page components.
  • /ui - to add or edit reusable ui components.

Home page:

• ./app/
  • globals.css
  • layout.jsx
  • page.jsx
• to edit home page, start editing components in ./src/components/home
• to find the theme colors check out globals.css

Projects, Events and Our Team page

• ./app/
  • our team
    • components
    • page.jsx
  • events
    • components
    • page.jsx
  • projects
    • components
    • page.jsx

• To edit these pages, create and edit components in respective folders.

Public Folder

• assets
  • images
  • icons
  • videos
• you can find required assets in ./public

Breakpoints for responsiveness

• sm: { max: "479px" }, // use this for mobile
• md: { max: "912px" }, // use this for tablet
• lg: { max: "1199px" }, // use this for smaller laptops
• Note:
  1. before the name of class u add use these to make the property applied specifically based on device. (e.g. sm:text-white will apply text-color to white for mobile device).
  2. if you don't add these prefixes, that class is applied for all display sizes.
  3. add these properties at last.

(back to top)