Welcome to the Rockethacks Hackathon Website! This website is designed to represent the spirit of "Rockethacks," a hackathon inspired by the themes of rockets and space exploration. The website is built using Next.js, React, Tailwind CSS, and ShadCN.
The website's design revolves around a space and rocket-centric theme, aiming to evoke the sense of outer space with visuals such as stars, planets, and rockets.
- Theme: Space and rocket-themed, with background visuals and imagery to reflect outer space elements.
- Colors:
- Primary Color: Blue (used for backgrounds, buttons, and headings).
- Accent Color: Yellow (used for highlights, buttons, and decorative elements).
- Font: A clean, modern, and bold font is used throughout the website to match the tech-savvy and space-themed vibe.
The website currently has three pages: Home/Landing Page, About Us Page, and FAQ Page.
- Hero Section:
- Displays a large rocket launch or space-themed background image/video.
- Bold and welcoming text, e.g., “Welcome to Rockethacks Hackathon!”.
- A prominent Call-to-Action (CTA) button, e.g., “Register Now!”, styled in yellow to stand out.
- About the Hackathon:
- Provides a brief description of the hackathon, its mission, and objectives.
- Uses cards or columns with space-themed icons to highlight key features (e.g., Workshops, Prizes, Networking).
- Footer:
- Includes social media links, contact information, and copyright details.
- Who We Are:
- Describes the organization’s vision and the purpose behind "Rockethacks".
- Uses blue backgrounds with yellow headings to maintain the website's cohesive theme.
- Team Section:
- Displays team members in a grid layout, each with a profile picture and short bio.
- Incorporates space-themed icons or decorative elements to enhance the page's visual appeal.
- Frequently Asked Questions:
- Utilizes an accordion-style layout where users can expand questions to view the answers.
- Keeps the background minimal, with subtle space-themed elements such as small stars or faint constellations.
- Contact Us Section:
- Provides a form or an email link for users to reach out with further questions.
- Next.js: For server-side rendering and routing.
- React: For building reusable components and handling the frontend of the website.
- Tailwind CSS: For styling and implementing the space-themed design using utility classes.
- ShadCN: For adding advanced UI components and improving user interaction.
- Clone the Repository:
git clone https://github.com/rockethacks/rockethacks.github.io.git cd rockethacks.github.io/front-end
- DEV_VERCEL_SETUP.md - Quick guide to set up dev Vercel project
- DEPLOYMENT_GUIDE.md - Comprehensive deployment guide with load testing
- DEV_ENVIRONMENT_SETUP.md - Detailed step-by-step setup with screenshots
- SECURITY_FAQ.md - Security questions and best practices
Daily Development:
# 1. Create feature branch from dev
git checkout dev
git pull origin dev
git checkout -b feature/your-feature
# 2. Make changes and test locally
npm run dev
# 3. Push and create PR to dev branch
git push origin feature/your-feature
gh pr create --base dev --head feature/your-feature
# 4. After merge, dev site auto-deploysDeploying to Production:
# After testing on dev site for 24-48 hours
gh pr create --base main --head dev --title "Release: [date]"
# After approval, production auto-deploys- dev branch → Dev Vercel Project (rockethacks-dev.vercel.app)
- main branch → Production Vercel Project (www.rockethacks.org)
- Both connect to shared Supabase database (secured by RLS)
- Set up dev Vercel project (see DEV_VERCEL_SETUP.md)
- Test authentication and application flow on dev site
- Deploy to production after 24-48 hours of testing