Rant is a modern, open-source web application that provides a safe, anonymous platform for users to share their thoughts, frustrations, and celebrations with the world. Express your mood, connect with others, and explore a vibrant community—without revealing your identity.
- Features
- Screenshots
- Tech Stack
- Project Structure
- Getting Started
- Usage
- Privacy & Security
- Accessibility
- Performance & Technical
- Contributing
- License
- Acknowledgements
- Contact
- Anonymous Posting: Share rants without creating an account. Your identity is never revealed.
- Mood Expression: Tag your rants with a mood (e.g., 😢, 😃, 😡, ❤️, etc.) and filter by mood.
- Real-time Updates: New rants and likes appear instantly via Supabase real-time subscriptions.
- Interactive UI: Like, bookmark, and comment on rants. Confetti 🎉 and toast notifications enhance feedback.
- Advanced Filtering: Search and filter rants by mood, popularity, or recency.
- Personal Rant History: View your own rants and bookmarks (stored locally in your browser).
- Keyboard Shortcuts: Quickly filter, navigate, and interact using keyboard shortcuts.
- Responsive Design: Fully optimized for mobile, tablet, and desktop.
- Accessibility: High contrast mode, reduced motion, adjustable font sizes, and full keyboard navigation.
- Theme Options: Switch between light, dark, and system themes.
Frontend:
- React
- TypeScript
- Tailwind CSS
- Framer Motion
- React Router
- React-Toastify
Backend & Data:
- Supabase (PostgreSQL, Auth, Realtime)
- Row Level Security (RLS)
- Local Storage (with optional encryption)
Development Tools:
- Vite
- ESLint
- Prettier
State Management:
- React Context
- Zustand
Other Libraries:
- Radix UI (accessibility primitives)
- Lucide React (icons)
- date-fns (date formatting)
- uuid (unique IDs)
- Fuse.js (fuzzy search)
- Sonner (toasts)
├── public/ # Static assets, emojis, translations
├── src/
│ ├── components/ # UI components (Navbar, RantCard, MoodSelector, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Supabase client, data models, utilities
│ ├── pages/ # Main pages (Index, MyRantsPage, NotFound)
│ ├── store/ # Zustand stores
│ ├── styles/ # CSS and Tailwind styles
│ └── utils/ # Helper functions
├── scripts/ # Utility scripts (e.g., sitemap generation)
├── supabase/ # Supabase config
├── package.json # Project metadata and scripts
├── vite.config.ts # Vite configuration
└── README.md # Project documentation
- Node.js (v18+ recommended)
- npm or yarn
- Supabase account (for backend)
-
Clone the repository:
git clone https://github.com/ajibolagenius/rant.git cd rant
-
Install dependencies:
npm install # or yarn install
-
Configure environment variables:
-
Copy
.env.example
to.env
and fill in your Supabase credentials:```env VITE_SUPABASE_URL=your-supabase-url VITE_SUPABASE_ANON_KEY=your-supabase-anon-key ```
-
Start the development server:
npm run dev # or yarn dev
-
Open http://localhost:8080 in your browser.
- Post a Rant: Use the input form to write and submit your rant. Select a mood to tag your post.
- Browse & Filter: Explore rants by mood, popularity, or recency. Use the search bar and mood filters.
- Like & Bookmark: Interact with rants by liking 👍 or bookmarking ⭐ them. Bookmarks and your own rants are stored locally.
- Keyboard Shortcuts: Press Shift + ? to view all available shortcuts.
- Settings: Access theme, language, and accessibility options from the settings menu.
- Anonymous Posting: No user accounts or personal data required. Rants are stored anonymously.
- Row Level Security (RLS): Supabase policies ensure that users can only access their own data.
- Local Storage: Bookmarks and rant history are stored in the browser's local storage, encrypted for security.
- Data Encryption: Sensitive data is encrypted before being stored in local storage.
- No Tracking: No third-party tracking or analytics. User interactions are not monitored.
- User Control: Users can delete their local data at any time through the settings menu.
- Data Retention: Rants are retained indefinitely unless deleted by the user. Supabase policies ensure data is not shared or sold.
- High contrast mode: Better visibility for users with visual impairments
- Reduced motion: Less animation for users with motion sensitivity
- Adjustable font sizes: Allow users to change font sizes for better readability
- Full keyboard navigation: Enable users to navigate the app using only keyboard shortcuts
- ARIA Attributes: Screen reader support for all interactive elements
- Optimized Rendering: React.memo implementation to prevent unnecessary re-renders
- Efficient Data Fetching: Optimized Supabase queries selecting only required fields
- Error Handling: Graceful error states and fallback UI components
- URL Synchronization: State reflected in URL for shareable filters and searches
- Rate Limiting: Prevents spam submissions and abuse
Contributions are welcome! To contribute:
- Fork the repository
- Create a new branch (
git checkout -b feature/your-feature
) - Make your changes
- Commit and push (
git commit -m 'Add feature' && git push
) - Open a pull request
Please follow the code style and add tests where appropriate.
This project is licensed under the MIT License.
- Supabase
- Shadcn UI
- Radix UI
- Framer Motion
- Lucide Icons
- date-fns
- uuid
- Fuse.js
- Sonner
- Tailwind CSS
- Vite
- React
- TypeScript
- Prettier
- ESLint
- React Router
- React-Toastify
For questions or support, open an issue or contact the maintainer.