eventLab 🧪

Layout • Features • Technologies • Colors • Getting Started • Usage • Collaborators • License

eventLab is a modern study platform for developers to watch lessons, track the syllabus schedule, and access developer materials.

The application was built during the Ignite Lab 02 event sponsored by Rocketseat, demonstrating how to use modern and powerful web technologies to construct advanced systems.

📱 Visit this Project

🎨 Layout

✨ Features

• Watch video lessons with built-in Vime Player
• Interactive lesson schedule and navigation
• Access to teacher details (avatar, name, bio)
• Links to complementary material (e.g. project repository, wallpapers)
• Beautiful responsive design with glassmorphism effects
• Secure registration for free spots on the event

💻 Technologies

Client (Web)

• TypeScript
• React
• Vite
• Apollo Client
• GraphQL
• Vime Player
• TailwindCSS
• Phosphor Icons

🎨 Color Palette

Color	Preview	Hex
Gray 900 (Background)		#17181F
Gray 700 (Panels)		#20232A
Brand Purple		#6C72CB
Brand Blue		#61DAFB
Accent Pink		#CB69C1
Status Green		#00B37E
Warning Orange		#FBA94C

🚀 Getting started

Cloning

git clone https://github.com/MarlonVictor/eventLab.git
cd eventLab

Environment Variables

Create a .env.local file at the root of the project with your GraphCMS API details:

cp .env.example .env.local

Variable	Description
VITE_API_URL	GraphCMS Content API endpoint URL
VITE_API_ACCESS_TOKEN	GraphCMS permanent auth token

Installation

npm install

Starting

npm run dev

Open http://localhost:3000 (or the port specified by Vite) in your browser.

Deployment

The app is deployed at https://eventlab.vercel.app/.

To build for production:

npm run build

The output is generated in the dist/ folder and can be served by any static hosting provider.

👀 Usage

1. Sign up on the subscription page by entering your name and email.
2. Access the main event dashboard page.
3. Choose a lesson from the interactive sidebar schedule to watch.
4. Explore additional resources (downloads, GitHub links, challenges).

🤝 Collaborators

Marlon Victor

🤝 Contribute

Contributions are always welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License 📃

This project is under MIT license.