Neighbourly: Let's Connect Communities - Frontend

🌟 About The Project

Neighbourly is a community engagement platform that enables people to create, publish, and participate in a wide range of events. This repository contains the frontend React application for the Neighbourly platform.

Key Features:

• User authentication (Login/Signup)
• Event discovery and participation
• Organization profiles
• Project management
• Volunteer registration
• Responsive design

---

📋 Table of Contents

1. Tech Stack
2. Features
3. Installation
4. Configuration
5. Project Structure
6. Screenshots
7. Contributing
8. Contact

---

🛠 Tech Stack

Frontend

• React - JavaScript library
• Vite - Build tool
• Redux Toolkit - State management
• React Router - Navigation
• Material UI - UI components
• Tailwind CSS - Styling
• Axios - HTTP requests

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing
• Vercel - Deployment

---

✨ Features

User Authentication

• Login/Signup with JWT
• Role-based access (Volunteer/Organization)
• Protected routes

Core Functionality

• Event discovery and filtering
• Project creation and management
• Volunteer registration
• Organization profiles
• Responsive design for all devices

UI Components

• Customizable theme
• Reusable components
• Interactive forms
• Loading states

---

💻 Installation

Prerequisites

• Node.js (v16+)
• npm or yarn

Setup Instructions

1. Clone the repository:

   git clone https://github.com/jasjeev013/neighbourly-frontend.git
   cd jasjeev013-neighbourly-frontend

2. Install dependencies:

   npm install

3. Create a .env file in the root directory with your environment variables:

   VITE_API_BASE_URL=your_backend_api_url
   

4. Start the development server:

   npm run dev

The application will be available at http://localhost:5173

---

⚙ Configuration

Environment Variables

Variable Name	Description	Required
VITE_API_BASE_URL	Base URL for backend API	Yes

Tailwind Configuration

Customize colors and themes in tailwind.config.js:

theme: {
  extend: {
    colors: {
      "navbar": '#2B293D',
      "body": '#F6F6F6',
      "button": "#230c69"
    }
  }
}

---

📂 Project Structure

jasjeev013-neighbourly-frontend/
├── public/                # Static assets
├── src/
│   ├── assets/            # Images, icons
│   ├── components/        # Reusable components
│   │   ├── auth/         # Authentication components
│   │   ├── events/       # Event-related components
│   │   ├── Home/         # Homepage components
│   │   ├── org/          # Organization components
│   │   ├── projects/     # Project components
│   │   └── volunteer/    # Volunteer components
│   ├── constants/        # Constant data
│   ├── lib/              # Utility components
│   ├── redux/            # State management
│   │   ├── org/         # Organization state
│   │   └── user/        # User state
│   ├── App.jsx          # Main app component
│   ├── main.jsx         # Entry point
│   └── index.css        # Global styles
├── .eslintrc.cjs        # ESLint config
├── postcss.config.js    # PostCSS config
├── tailwind.config.js   # Tailwind config
├── vite.config.js       # Vite config
└── package.json         # Project dependencies

---

📸 Screenshots

Homepage

Authentication Flow

Event Discovery

Organization Dashboard

---

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📧 Contact

Jasjeev

• GitHub: @jasjeev013
• Email: [email protected]

---