This is the source-code behind General, a curated visual experience powered by Pexels API.
General is a web application for browsing and discovering high-quality photos and videos from Pexels. It features a clean, dark interface with smooth animations and intuitive navigation.
General includes a photo gallery with curated photos from Pexels, a video collection featuring trending videos, search functionality to find specific content, voice search support, download capability for saving favorite images and videos, responsive design that works seamlessly on all devices, a dark theme that is easy on the eyes, floating search for quick access when scrolling, scroll to top button for easy navigation, and preferences to customize your experience.
The project uses React as the UI library, TypeScript for type safety, Vite as the build tool, Tailwind CSS for styling, Framer Motion for animations, and Pexels API as the content source.
- react
- react-dom
- react-router-dom
- framer-motion
- lucide-react
- pexels
- dotenv
- @types/node
- @types/react-router-dom
- vite
- @vitejs/plugin-react
- typescript
- tailwindcss
- postcss
- autoprefixer
- eslint
- @eslint/js
- typescript-eslint
- @types/react
- @types/react-dom
- @tailwindcss/forms
- @tailwindcss/typography
- vite-plugin-node-polyfills
- terser
- eslint-plugin-react-hooks
- eslint-plugin-react-refresh
- globals
Make sure you have Node.js 18+ and npm installed, then follow these steps:
- Install dependencies:
npm install- Create environment file with your Pexels API key:
# Add VITE_PEXELS_API_KEY=your_api_key to .env- Start the development server:
npm run dev- Build for production:
npm run buildsrc/
├── components/ # React components
├── pages/ # Page components
├── hooks/ # Custom hooks
├── context/ # React context
└── types/ # TypeScript types
This project uses content from Pexels. Please review Pexels' terms of service for usage guidelines.