AfterHours is a unique, time-sensitive social platform designed for shared late-night thoughts. It's not just another feed—it's a digital space that transforms when the sun goes down.
AfterHours features a dynamic Night Mode that changes the entire atmosphere of the application based on real-time clock settings (or Admin control).
- By Night: An immersive, animated starry sky glassmorphism interface.
- By Day: A serene, video-based ambient background (Rainy Window).
- Night Mode : Chat section open only at 12AM to 6AM and erases all data after this time period.
- 12am-5am Night Feed (Persistent) : Auto-delete posts after 24 hours
- Authentication: Secure login and registration system.
- Glassmorphism UI: Premium, modern interface with blur effects and gradients.
- Dynamic Backgrounds: Visuals that adapt to the time of day.
- Lack of Intimacy: Daytime feeds are noisy and chaotic, lacking a dedicated space for quieter, late-night thoughts.
- Implement mood reactions (❤️ 😂 😢 😡)
- Implement category selection (Stress, Love, Rant, Motivation)
- Add 200 character limit validation
- Bad words filter function
- IP rate limiting function
- Reports table
- Banned IPs table
- Active users tracking
- No login use Anonoymous
- Time Travel: Admins can override the "Night Mode" schedule.
- Posting Windows: Admins set exclusive hours when posting is allowed.
- Live Updates: Changes in the admin panel broadcast immediately to all users.
- Local-First Architecture: Uses robust local storage patterns for offline-capable demos.
- React Router: Seamless Single Page Application (SPA) navigation.
- Tailwind CSS: Rapid, responsive styling.
- Vite: Blazing fast build and development.
- Node.js (v18+)
- npm
-
Clone the repository
git clone https://github.com/UTSAV1434/AfterHours.git cd AfterHours -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open in browser via
http://localhost:3000
- Register: Go to
/loginand create a new account. - Admin Panel: Navigate to
/adminand login with password: - Control Time: Use the sliders to change "Night Mode" hours.
- Observe: Watch the background transform instantly!
- Frontend: React, TypeScript, Vite
- Styling: Tailwind CSS, Lucide React (Icons)
- State: Context API + Local Storage Persistence
- Backend: Supabase Edge Functions (Ready for integration)
- Deployment: Netlify
- Built for the TECHX26 Hackathon
-
Team APYX
-
Aryan Pandey (Leader)
-
Utsav Kumnar
-
Pranjal
-
Adarsh Dubey
Deployment Links:
- For Anonymous use: https://stellular-nougat-bc4b9f.netlify.app/
- For user login use: https://delicate-puppy-c49ea4.netlify.app/