This project is a full-stack application designed as a contact management system. It allows users to create, view, update, and delete contact details. The project demonstrates real-time data handling and responsive web design.
- React/Next.js
- Supabase
- Tailwind CSS
- TypeScript
- Netlify
- Node.js (v12.x or newer)
- npm or yarn as package managers
- Supabase account for setting up the backend (database and authentication)
-
Clone the Repository
git clone https://github.com/your-username/your-project-name.git cd your-project-name
-
Install Dependencies
npm install
-
Environment Variables Create a
.env.local
file in the root directory and add the following keys:NEXT_PUBLIC_SUPABASE_URL=your-supabase-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
-
Run the Development Server
npm run dev
Navigate to
http://localhost:3000
to view the app.
/components
: Reusable UI components like Button, Modal, etc./contacts
: Contact page (default)/public
: Static assets like images and fonts./utils
: Helpers used across the app/ui
: Generic components/types
: type definitions/packages
: Utility, validations container
Deploying on Netlify:
-
Set Up Your Netlify Account: If you haven't already, create an account.
-
Connect Your GitHub Repository to Netlify: From the Netlify dashboard, import your project from GitHub by selecting "New Project", then your repository.
-
Configure Environment Variables: In your Netlify project settings, configure all the environment variables you have in your
.env.local
file under Settings > Environment Variables.