SSC Navigator

A beautifully designed, modern web application to search and filter SSC Phase 14 post vacancies.

---

Preview

---

Features

• Smart Search & Filtering - Search posts by name, filter by qualification and region
• Vacancy Breakdown - View detailed vacancy counts (UR, OBC, SC, ST, EWS) for each post
• Apple-Inspired UI - Beautiful glassmorphism effects, smooth animations, and modern design
• Dark/Light Mode - Toggle between themes with persistent preference
• Fully Responsive - Optimized for desktop, tablet, and mobile devices
• Fast Performance - Built with Next.js 16 and optimized for speed
• API Rate Limiting - Protected against data scraping
• SEO Optimized - Complete with sitemap, robots.txt, and structured data
• Views Counter - Real-time view tracking with PostgreSQL database

Live Demo

Check out the live application: sscnavigator.vercel.app

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Database: PostgreSQL (for views counter)
• Deployment: Vercel
• Fonts: Geist Sans & Geist Mono

Installation

1. Clone the repository

git clone https://github.com/yourusername/sscpostfinder.git
cd sscpostfinder

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory:

DATABASE_URL=your_postgresql_connection_string

4. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

Database Setup

The app uses PostgreSQL for the views counter. Set up your database and add the connection string to your .env file.

The views table is automatically created on first run.

Project Structure

sscpostfinder/
├── app/
│   ├── api/
│   │   ├── posts/      # Posts API with search/filter
│   │   ├── totals/     # Vacancy totals API
│   │   └── views/      # Views counter API
│   ├── layout.tsx      # Root layout with metadata
│   ├── page.tsx        # Main page component
│   ├── robots.ts       # SEO robots.txt
│   ├── sitemap.ts      # SEO sitemap.xml
│   └── globals.css     # Global styles
├── data/
│   ├── ssc_posts_full.json
│   └── ssc_totals.json
└── public/
    └── favicon.svg

Building for Production

npm run build
npm start

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project in Vercel
3. Add your environment variables
4. Deploy!

The app is optimized for Vercel with automatic SEO and performance optimizations.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Made by jashgro

Acknowledgments

• SSC for the vacancy data
• Next.js team for the amazing framework
• Vercel for hosting
• Tailwind CSS for the utility-first CSS framework

---

If you find this project helpful, please consider giving it a star on GitHub!