Resourcely

A platform to help newcomers to Canada easily find essential services.
github.com/nihalinel/resourcely

Table of Contents

Table of Contents

1. About The Project
   • Key Features
2. Architecture
3. Getting Started
   • Prerequisites
   • Installation
4. Acknowledgments

About The Project

Resourcely is a React-based web application designed to assist newcomers to Canada in finding essential services. It provides a centralized platform to discover resources such as food banks, job centers, and local events, with a focus on being ESL-friendly and easy to use. The current implementation features a waitlist sign-up page.

Key Features

• Waitlist Sign-up: Allows users to submit their email to join a waitlist for the platform.
• Firebase Integration: Uses Firebase Firestore to store submitted email addresses.
• Responsive Design: The application layout adapts to different screen sizes.
• Modern UI: Styled with SCSS, providing a clean and user-friendly interface.

Architecture

The project is built using:

• Frontend: React
• Styling: SCSS
• Database: Firebase Firestore
• Routing: React Router
• Package Manager: npm

Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

• Node.js and npm installed on your machine. You can download Node.js from nodejs.org.

Installation

1. Clone the repository:

   git clone https://github.com/nihalinel/resourcely.git

2. Navigate to the project directory:

   cd resourcely

3. Install the npm packages:

   npm install

4. Configure Firebase:
   • Create a Firebase project on the Firebase Console.
   • Enable Firestore Database.
   • Obtain your Firebase configuration details (apiKey, authDomain, projectId, etc.).
   • Create a .env file in the root of your project and add your Firebase configuration as environment variables:

     REACT_APP_FIREBASE_API_KEY=YOUR_API_KEY
     REACT_APP_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
     REACT_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
     REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
     REACT_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
     REACT_APP_FIREBASE_APP_ID=YOUR_APP_ID
     REACT_APP_FIREBASE_MEASUREMENT_ID=YOUR_MEASUREMENT_ID
     

5. Start the development server:

   npm start

   Open http://localhost:3000 to view it in your browser.

Acknowledgments

• This README was created using gitreadme.dev — an AI tool that looks at your entire codebase to instantly generate high-quality README files.