Click to expand
- 📜 Project Description- 📖 Project Purpose
- ✨ Features
- ⚙️ Tech Stack
- 🎥 Demo
- 🔨 Installation
- 🚀 Usage
- 💻 Development Process
- 📊 Database Schema
- 📝 Credits
- 📞 Contact
Enable Good is a full-stack platform built with React + TypeScript + Firestore that connects companies and NGOs to collaborate on impactful projects.
The app features both a Public layout (open to all users) and a Private layout (accessible only after signing up as an NGO). It integrates authentication, a step-by-step registration process, subscription plans, payment simulation, dynamic company/project pages, data upload with Firebase storage, and Google Calendar integration for booking and syncing real events.
The platform is fully responsive across devices and simulates a real-world SaaS product for NGO-company collaboration.
The main goal of Enable Good is to demonstrate:
- 🔐 Authentication & Authorization flows with Firebase Auth (email login + custom form validations + Google integration).
- 📊 Real-time database interactions with Firestore (companies, projects, users).
- 📅 External API integration with Google Calendar API for event management.
- 🎨 Responsive UI/UX designed for smooth navigation across public and private layouts.
- ⚡ Modern React development with TypeScript for strong typing and maintainability.
It replicates a SaaS-style platform where NGOs can register, collaborate with companies, upload documents, subscribe to plans, and manage their work in a personalized dashboard.
- ❌ 404 Error Page with a Lottie animation when the user enters an invalid or unsupported route
- Access Restriction Page – shows if a non-logged-in user tries to enter private content
- Home Page & About Us
- Learning Hub – video carousel for educational content
- Impact Reports – showcase NGO impact
- Explore Page – filter & search companies/projects by industry, ESG/SDG goals, and more
- Company & Project Detail Pages – fully dynamic, populated from Firestore
- Register Page – step-by-step signup form:
- Custom validation
- Firebase email/password login integration
- Upload & preview documents (stored in Firestore)
- Subscription plan selection
- Simulated payment flow → Welcome Page → Private Dashboard
- Login Page with show/hide password and validation
- Dashboard – social media-like feed with posts, likes, reposts & UI animations
- Notifications & Messaging – notification popup + dummy messaging system
- Statistics Page – interactive charts powered by ApexCharts
- Calendar Page – integrates Google Calendar API
- Authorize with Google
- View actual calendar + events
- Book events directly into Google Calendar
- Matchmaking Page – browse companies & save favorites
- Saved Profiles Page – view saved companies/projects
- Explore Page – same as public, but with private features
- Projects:
- All Projects page
- Current Project page
- Project Detail page (dynamic info)
- Submit Document page (upload + read from Firestore)
- Project Progress page
- Learning Hub & Impact Reports – same as public
- Account Page:
- Update profile info (name, location, etc.)
- Change password
- Change/delete profile picture
- View subscription plan
- Delete account
- 3-step verification → Verified users get a yellow border around profile pic
Check out the live demo:
- Clone the repository:
git clone https://github.com/makedonkatochevska/Enable_Good.git . - Install dependencies:
npm install
- Start development server:
npm run dev
Once set up, you can access the project through your local browser. You can interact with the page's features, such as:
- Visit the public pages without login (Home, About, Explore).
- Register as NGO to access the private layout.
- Upload documents, select a subscription plan, and complete simulated payment.
- Explore dynamic company & project pages.
- Authorize with Google to sync your calendar events.
- Manage your NGO account, update profile, and explore verified users.
The project was developed with a strong focus on UI/UX, responsiveness, and user interaction. Here's a breakdown of the steps followed during development:
-
📐 Figma Review & Planning
- Analyzed the full design in Figma for both desktop and mobile views.
- Mapped out page structure, layout, icons, and interactive behaviors.
- Identified reusable components, navigation logic, and assets to optimize development.
-
🧱 UI Implementation
- Built a fully custom codebase using React + TypeScript.
- Styled components using SCSS modules and Bootstrap where necessary.
- Ensured responsive layouts with a mobile-first approach.
- Implemented dynamic elements like video carousels, scrollable filters, and interactive cards.
-
🔁 Page Routing & State Management
- Set up React Router with protected routes for the private layout.
- Managed global state for authentication, user sessions, and saved filters using React Context + Firestore.
- Implemented smooth page transitions and UI animations with Framer Motion.
- Created fallback routes for unknown URLs leading to a custom 404 page.
-
🔒 Authentication & Authorization
- Integrated Firebase Auth for email/password login and Google OAuth.
- Developed a step-by-step registration form with real-time validations.
- Handled login/logout state and stored user session data in Firestore.
- Ensured that private pages (dashboard, projects, account) are accessible only to authenticated NGO users.
-
📅 Google Calendar Integration
- Integrated Google Calendar API to allow NGOs to authorize their accounts.
- Enabled viewing of actual events and booking new events directly from the platform.
- Restricted testing to approved emails in Google API test mode.
-
🔧 Private Layout Features
- Built Dashboard with social media-like posts, likes, and reposts.
- Created Notifications and Messages UI with dummy data for simulation.
- Implemented Statistics Page using ApexCharts with responsive charts.
- Developed Project Pages with dynamic info, document uploads, and project progress tracking.
- Enabled account management, including profile updates, password changes, subscription management, and 3-step verification for verified users.
-
🔍 Explore & Matchmaking Functionality
- Built Explore Pages with dynamic filtering and sorting by industry, ESG/SDG goals, and other criteria.
- Developed Matchmaking and Saved Profiles pages for NGOs to browse and bookmark companies/projects.
-
🧪 Testing & Refinement
- Tested across multiple devices and screen sizes to ensure full responsiveness.
- Verified login/logout flows, state persistence, and API integration.
- Refined animations, UI interactions, and accessibility for a smooth user experience.
This development workflow ensures a fully functional, responsive, and interactive platform that simulates a real-world SaaS product for NGO-company collaboration.
type CompanyType = {
name: string;
slug: string;
shortDescription: string;
logoUrl: string;
esgGoals: string[];
industry: string;
sdgGoals: string[];
type: string;
projects: string[];
whoAreWe: string;
ourVision: string;
ourHistory: string;
};type ProjectType = {
title: string;
slug: string;
description: string;
startDate: string;
endDate: string;
logoUrl: string;
longDesc: string;
};type UserType = {
causeArea: string;
country: string;
createdAt: string;
email: string;
id: string;
image: string | null;
industry: string;
isVerified: boolean;
organisationName: string;
partnershipGoals: string[];
partnershipPreferences?: {
location?: string[];
duration?: string[];
partnerType?: string[];
esgPillars?: string[];
};
password: string;
confirmPassword: string;
registeredCharityNumber: number;
role: string;
sdgs: string[];
shortBio?: string;
sizeOfOrganisation: number;
subscriptionPlan: string;
website?: string;
documents: Array<{ type: string; file: File | null }>;
savedProfiles: string[];
};- Developer: Makedonka Tochevska
- UI Components: Bootstrap, FontAwesome, Framer Motion
- Design: The design for this project was provided by Brainster.
- Icons: Icons used throughout the application are from the Figma Design System and Font Awesome.
- Animations: Lottie animations were used to enhance user experience, including the 404 page animation and Loading component.
- Mentors & Resources: Special thanks to the instructors at Brainster Academy for their guidance and knowledge.
📫 You can reach me through email at makedonkatochevska@gmail.com
or
