Unlock the world of acronyms! Discover, create, and share the coolest abbreviations Gen Z style.
A modern web application built with Next.js that allows users to discover trending acronyms, search for meanings, and engage with a community of language enthusiasts.
- Acronym Search: Discover meanings of trending acronyms and abbreviations
- AI-Powered Explanations: Get detailed explanations powered by Google's Gemini AI
- Real-time Search: Instant search results with smart suggestions
- Trending Acronyms: Stay updated with the hottest acronyms everyone's using
- Dark/Light Theme: Toggle between beautiful dark and light themes
- Responsive Design: Seamless experience across mobile, tablet, and desktop
- Modern UI: Clean, intuitive interface with smooth animations
- Mobile-First: Optimized for mobile users with touch-friendly interactions
- Secure Authentication: Powered by Clerk for robust user management
- User Profiles: Personalized user profiles with search history
- Protected Routes: Secure access to dashboard and profile features
- Create Your Own: Submit and share custom acronyms
- Community Vibes: Vote, comment, and connect with fellow enthusiasts
- Leaderboards: Compete with other users
- Categories: Browse acronyms by topics
- Framework: Next.js 14 (App Router),
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Custom components with Lucide React icons
- Animations: Framer Motion
- State Management: React Hooks
- Database: MongoDB Atlas
- ODM: Mongoose
- API: Next.js API Routes
- AI Integration: Google Gemini AI
- Auth: Clerk Authentication
- Deployment: Vercel (recommended)
- Version Control: Git & GitHub
- Node.js 18+
- npm or yarn
- MongoDB Atlas account
- Clerk account
- Google Gemini API key
- Clone the repository
git clone https://github.com/fazil-shaik/acroymnverse.git
cd acroymnverse/myapp- Install dependencies
npm install
# or
yarn install- Environment Setup
Create a
.env.localfile in the root directory:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
# AI Integration
GEMINI_API_KEY=your_gemini_api_key
# Database
MONGODB_URI=your_mongodb_connection_string- Run the development server
npm run dev
# or
yarn dev- Open your browser Navigate to http://localhost:3000
myapp/
├── app/ # Next.js App Router
│ ├── api/ # API Routes
│ │ ├── acronyms/ # Acronym-related endpoints
│ │ └── search/ # Search functionality
│ ├── dashboard/ # Dashboard page
│ ├── profile/ # User profile page
│ ├── sign-in/ # Authentication pages
│ ├── sign-up/
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Landing page
├── components/ # Reusable components
│ ├── AcronymSearch.tsx # Main search component
│ ├── ThemeProvider.tsx # Theme context provider
│ └── ui/ # UI components
├── lib/ # Utility functions
│ ├── mongodb.ts # Database connection
│ └── utils.ts # Helper functions
├── models/ # Database models
│ └── Acronym.ts # Acronym schema
├── public/ # Static assets
└── types/ # TypeScript type definitions
The heart of the application featuring:
- Real-time search with debouncing
- AI-powered explanations
- Responsive grid layout
- Loading states and error handling
Manages dark/light theme switching with:
- System preference detection
- Persistent theme storage
- Smooth transitions
Secure user management with:
- Sign up/Sign in flows
- Protected routes
- User session management
- Primary: Pink to Teal gradient (
from-pink-500 to-teal-500) - Dark Theme: Gray-800 backgrounds with accent colors
- Light Theme: White/Gray-100 backgrounds
- Headings: Bold, responsive font sizes
- Body: Clean, readable text with proper contrast
- Interactive: Hover effects and smooth transitions
- Mobile: Base (320px+)
- Tablet: sm (640px+), md (768px+)
- Desktop: lg (1024px+), xl (1280px+)
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically
Make sure to add all required environment variables in your deployment platform.
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add some amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain responsive design principles
- Add proper error handling
- Write meaningful commit messages
AcronymVerse is built mobile-first with:
- Responsive Navigation: Hamburger menu for mobile
- Touch-Friendly: Proper touch targets and gestures
- Optimized Performance: Fast loading on mobile networks
- Adaptive UI: Components that work well on all screen sizes
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # Run TypeScript checks-
Build Errors
- Check TypeScript types
- Verify environment variables
- Clear
.nextfolder and rebuild
-
Authentication Issues
- Verify Clerk configuration
- Check environment variables
- Ensure proper redirect URLs
-
Database Connection
- Verify MongoDB URI
- Check network connectivity
- Ensure database permissions
This project is licensed under the MIT License - see the LICENSE file for details.
Fazil Shaik
- GitHub: @fazil-shaik
- Project: AcronymVerse
- Clerk for authentication services
- Google Gemini AI for AI-powered explanations
- Vercel for hosting and deployment
- MongoDB for database services
- Next.js team for the amazing framework
Built with ❤️ by Fazil Shaik