Getting Started

Prerequisites

Make sure you have the following installed on your machine:

• Node.js (version 18 or higher)
• Git

Clone and Setup

1. Clone the repository

   git clone https://github.com/PriyanshuAnsh/SynapseOS-frontend.git
   cd SynapseOS-frontend

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

4. Open your browser

   Navigate to http://localhost:3000 to see the application.

Project Structure

src/
├── app/
│   ├── login/
│   │   └── page.tsx          # Login page
│   ├── signup/
│   │   └── page.tsx          # Signup page
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Homepage
├── components/
│   └── ui/                   # shadcn/ui components
└── lib/
    └── utils.ts              # Utility functions

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Screenshots

Homepage

Simple navigation page with buttons to access login and signup pages.

Login Page

• Email and password input fields
• Remember me checkbox
• Forgot password link
• Social login buttons (Google, Twitter)
• Responsive design with gradient background

Signup Page

• Full name, email, and password fields
• Password confirmation
• Terms of service agreement
• Newsletter subscription option
• Social signup buttons

Customization

Colors and Themes

The project uses Tailwind CSS with custom gradient backgrounds. You can modify the colors in:

• src/app/globals.css - Global styles
• Component files - Individual gradient and color classes

Components

All UI components are built with shadcn/ui and can be customized in the src/components/ui/ directory.

Learn More

To learn more about the technologies used:

• Next.js Documentation - learn about Next.js features and API
• shadcn/ui - beautiful UI components
• Tailwind CSS - utility-first CSS framework
• Lucide React - beautiful icons

Deployment

Deploy on Vercel (Recommended)

The easiest way to deploy this Next.js app is to use Vercel:

1. Fork or clone this repository
2. Connect to Vercel:
   • Go to vercel.com
   • Sign up/in with your GitHub account
   • Click "New Project"
   • Import your repository
3. Deploy:
   • Vercel will automatically detect it's a Next.js project
   • Click "Deploy" - no configuration needed!
   • Your app will be live in minutes

Deploy on Netlify

1. Build the project:

   npm run build

2. Deploy the out folder to Netlify

Deploy on Other Platforms

This project can be deployed on any platform that supports Next.js:

• Railway
• Render
• AWS Amplify
• DigitalOcean App Platform

Contributing

1. Fork the repository
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