MemeCoin Roulette is an innovative and engaging web application designed for both entertainment and meme enthusiasts. Built with React, TypeScript, Tailwind CSS, and Framer Motion, this project combines the world of memes and gambling, creating a unique experience for users.
- Welcome Popup: Users are greeted with a random meme and an optional audio clip that plays on load. The popup lets users choose whether to enable or skip the sound for a personalized experience.
- Trending Memes: Displays a collection of trending memes, ensuring users stay up-to-date with the latest and most popular memes.
- Live Feed: A dynamic live feed shows meme-related content to keep users entertained during their session.
- Smooth Animations: Leveraging Framer Motion for smooth, delightful animations and transitions, enhancing the visual appeal and user interaction.
- Responsive Design: A fully responsive design ensures seamless functionality across various devices, from desktops to mobile phones.
- Languages: TypeScript, JavaScript, HTML, CSS
- Frameworks and Libraries: React, Tailwind CSS, Framer Motion, Lucide React
- Build Tools: Vite, PostCSS
- Package Manager: npm
- Version Control: Git, GitHub
- Deployment Platform: Vercel
- HTML5 Audio API: Utilized for audio playback, especially for the optional sounds accompanying memes. It enables users to control sound on/off through a simple UI.
- Giphy API: Integrates Giphy to fetch and display trending memes in GIF format, keeping content fresh and engaging for users.
- Intersection Observer API: Optimizes the performance of meme loading by lazy-loading content as it enters the viewport, improving the overall user experience.
To get started with the MemeCoin Roulette application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/prem22k/MemeCoin-Roulette.git
-
Navigate to the project directory:
cd memecoin-roulette -
Install the dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit
http://localhost:3000to see the application in action.
The application is deployed using Vercel, a cloud platform for hosting static sites and serverless functions. To deploy it yourself:
- Create a Vercel account at vercel.com.
- Install Vercel CLI:
npm install -g vercel
- Login to your Vercel account:
vercel login
- Deploy the app:
vercel
- Follow the prompts to configure deployment settings.
- After deployment, you'll get a unique URL for your live application.
A video demonstration of the MemeCoin Roulette app will be available shortly.
Here are some screenshots showcasing the features and user interface of MemeCoin Roulette:
We welcome contributions from everyone! If you have suggestions, improvements, or bug reports, please open an issue or submit a pull request. Be sure to follow the project’s code of conduct.
This project is licensed under the MIT License.
For any inquiries or feedback, please contact the project maintainer at premsai224k@gmail.com.
Enjoy the MemeCoin Roulette experience!