Getting Started  ❖  Team  ❖  Overview  ❖  Features  ❖  Stack  ❖  Deploy ↗︎

✌ Team

• @pheralb - Pablo Hdez.
• @tmchein - Juan Rojas.

🛠️ Stack

• Next.js with TypeScript - The React Framework for Production.
• Next-Auth - Authentication for Next.js.
• Prisma with CockroachDB - Next-generation Node.js and TypeScript ORM.
• tRPC 10 - End-to-end typesafe API.
• Tailwind CSS with clsx - A utility-first CSS framework for rapidly building custom designs.
• Radix UI Primitives - Unstyled, accessible components for building high‑quality design systems.
• Framer Motion - A production-ready motion library for React.
• Iconoir icons - A set of 1000+ free MIT-licensed high-quality SVG icons.
• Prettier with prettier-plugin-tailwindcss - An opinionated code formatter + sort tailwindcss classes.
• React-Hook-Forms - Performant, flexible and extensible forms with easy-to-use validation.
• Zod - TypeScript-first schema validation.

✨ Features

General:

• Authentication with Github.

For the participant:

• The user can add his project.
• The user can edit his project before a deadline (soon).
• When the deadline is reached, the user can only see the project (soon).

For the admin:

• The admin can add a new hackathon.
• The admin can edit a hackathon.
• The admin can delete a hackathon.
• The admin can share the link to the hackathon.
• The admin can see the list of projects.
• The user can set a winner (mark a user as a winner).
• The user can set a project as 'reviewed'.

🪐 Overview

• /prisma - Database schema.
• /src/animations - Framer motion animations.
• /src/components - All app components, built with Tailwind CSS.
• /src/env - Validate all environment variables with Zod.
• /src/layout - App header & footer.
• /src/lib - getServerAuthSession (next-auth) & Prisma library.
• /src/pages/api - Next-Auth config & tRPC api route.
• /src/schema - Hackathon & Participation Zod schemas.
• /src/styles - Tailwind CSS global styles + add custom font.
• /src/trpc - tRPC routers, initialization & global appRouter.
• /src/types - Hackathon, participation & next-auth types.
• /src/ui - All UI components built with Radix + Tailwind (clsx).
• /src/ui/icons - Iconoir icons *.

• We have extracted the icons used in the app due to a bug in the React library - issue.

🚀 Getting Started

Project settings:

1. Clone or fork the repository:

git@github.com:pheralb/project-hackathon.git

2. Install dependencies with your favorite package manager:

# with npm:
npm install

# with pnpm:
pnpm install

# with yarn:
yarn install

# with ultra:
ultra install

Environment variables:

3. Create a .env file in the root of the project with the following variables:

# CockroachDB connection string:
DATABASE_URL = ""

# Next-Auth config:
NEXTAUTH_SECRET="" # Generate a random string.
NEXTAUTH_URL="" # Your project url, e.g. http://localhost:3000.

# Github OAuth Provider:
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""

CockroachDB settings:

4. Create a free cluster.
5. Create a SQL user.
6. To connect to the user, copy the connection string and paste it in the .env file, replacing the DATABASE_URL variable.

Github OAuth Provider settings:

7. Click here to create new Github OAuth app.
8. Go to "Client secrets" and generate new client secret and and paste it into GITHUB_CLIENT_SECRET env.
9. Copy the Client ID and paste it into GITHUB_ID env.

Run the project:

10. Run in your terminal:

# with npm:
npm run dev

# with pnpm:
pnpm run dev

# with yarn:
yarn dev

# with ultra:
ultra dev

and open http://localhost:3000 🚀.

😊 Contributing

☁ Deploy

• Vercel: https://phck.vercel.app

🔑 License

• MIT License.