Pitchify
This project showcases the latest features of Next.js 15, including Next.js Form for seamless client-side form submissions, Unstable After for background tasks, Server Component HMR Cache for faster development, Typed Routes for safer navigation, and Partial Prerendering for performance optimization.
Install / Use
/learn @JavaScript-Mastery-Pro/PitchifyREADME
📋 <a name="table">Table of Contents</a>
- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🕸️ Snippets (Code to Copy)
- 🔗 Assets
- 🚀 More
🚨 Tutorial
This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a>.
If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
<a href="https://www.youtube.com/watch?v=FkowOdMjvYo" target="_blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/1736fca5-a031-4854-8c09-bc110e3bc16d" /></a>
<a name="introduction">🤖 Introduction</a>
A Next.js 15 platform where entrepreneurs can submit their startup ideas for virtual pitch competitions, browse other pitches, and gain exposure through a clean minimalistic design for a smooth user experience.
If you're getting started and need assistance or face any bugs, join our active Discord community with over 34k+ members. It's a place where people help each other out.
<a href="https://discord.com/invite/n6EdbFJ" target="_blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e" /></a>
<a name="tech-stack">⚙️ Tech Stack</a>
- React 19
- Next.js 15
- Sanity
- TailwindCSS
- ShadCN
- TypeScript
<a name="features">🔋 Features</a>
👉 Live Content API: Displays the latest startup ideas dynamically on the homepage using Sanity's Content API.
👉 GitHub Authentication: Allows users to log in easily using their GitHub account.
👉 Pitch Submission: Users can submit startup ideas, including title, description, category, and multimedia links ( image or video).
👉 View Pitches: Browse through submitted ideas with filtering options by category.
👉 Pitch Details Page: Click on any pitch to view its details, with multimedia and description displayed.
👉 Profile Page: Users can view the list of pitches they've submitted.
👉 Editor Picks: Admins can highlight top startup ideas using the "Editor Picks" feature managed via Sanity Studio.
👉 Views Counter: Tracks the number of views for each pitch instead of an upvote system.
👉 Search: Search functionality to load and view pitches efficiently.
👉 Minimalistic Design: Fresh and simple UI with only the essential pages for ease of use and a clean aesthetic.
and many more, including the latest React 19, Next.js 15 and Sanity features alongside code architecture and reusability
<a name="quick-start">🤸 Quick Start</a>
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/JavaScript-Mastery-Pro/pitchify.git
cd pitchify
Installation
Install the project dependencies using npm:
npm install
Set Up Environment Variables
Create a new file named .env.local in the root of your project and add the following content:
NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_SANITY_DATASET=
NEXT_PUBLIC_SANITY_API_VERSION='vX'
SANITY_TOKEN=
AUTH_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
Replace the placeholder values with your actual Sanity credentials. You can obtain these credentials by signing up & creating a new project on the Sanity website.
Running the Project
npm run dev
Open http://localhost:3000 in your browser to view the project.
<a name="snippets">🕸️ Snippets</a>
<details> <summary><code>tailwind.config.ts</code></summary>import type {Config} from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./sanity/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
screens: {
xs: "475px",
},
colors: {
primary: {
"100": "#FFE8F0",
DEFAULT: "#EE2B69",
},
secondary: "#FBE843",
black: {
"100": "#333333",
"200": "#141413",
"300": "#7D8087",
DEFAULT: "#000000",
},
white: {
"100": "#F7F7F7",
DEFAULT: "#FFFFFF",
},
},
fontFamily: {
"work-sans": ["var(--font-work-sans)"],
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
boxShadow: {
100: "2px 2px 0px 0px rgb(0, 0, 0)",
200: "2px 2px 0px 2px rgb(0, 0, 0)",
300: "2px 2px 0px 2px rgb(238, 43, 105)",
},
},
},
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
};
export default config;
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--radius: 0.5rem;
}
}
@layer utilities {
.flex-between {
@apply flex justify-between items-center;
}
.text-30-extrabold {
@apply text-[30px] font-extrabold text-white;
}
.text-30-bold {
@apply text-[30px] font-bold text-black;
}
.text-30-semibold {
@apply font-semibold text-[30px] text-black;
}
.text-26-semibold {
@apply font-semibold text-[26px] text-black;
}
.text-24-black {
@apply text-[24px] font-black text-black;
}
.text-20-medium {
@apply font-medium text-[20px] text-black;
}
.text-16-medium {
@apply font-medium text-[16px] text-black;
}
.text-14-normal {
@apply font-normal text-sm text-white-100/80;
}
.pink_container {
@apply w-full bg-primary min-h-[530px] pattern flex justify-center items-center flex-col py-10 px-6;
}
.tag {
@apply bg-secondary px-6 py-3 font-work-sans font-bold rounded-sm uppercase relative tag-tri;
}
.heading {
@apply uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5;
}
.sub-heading {
@apply font-medium text-[20px] text-white max-w-2xl text-center break-words;
}
.section_container {
@apply px-6 py-10 max-w-7xl mx-auto;
}
.card_grid {
@apply grid md:grid-cols-3 sm:grid-cols-2 gap-5;
}
.card_grid-sm {
@apply grid sm:grid-cols-2 gap-5;
}
.no-result {
@apply text-black-100 text-sm font-normal;
}
/* profile */
.profile_container {
@apply w-full pb-10 pt-20 px-6 max-w-7xl mx-auto lg:flex-row flex-col flex gap-10;
}
.profile_card {
@apply w-80 px-6 pb-6 pt-20 flex flex-col justify-center items-center bg-primary border-[5px] border-black shadow-100 rounded-[30px] relative z-0 h-fit max-lg:w-full;
}
.profile_title {
@apply w-11/12 bg-white border-[5px] border-black rounded-[20px] px-5 py-3 absolute -top-9 after:absolute after:content-[''] after:-top-1 after:right-0 after:-skew-y-6 after:bg-black after:-z-[1] after:rounded-[20px] after:w-full after:h-[60px] before:absolute before:content-[''] before:-bottom-1 before:left-0 before:-skew-y-6 before:w-full before:h-[60px] before:bg-black before:-z-[1] before:rounded-[20px] shadow-100;
}
.profile_image {
@apply rounded-full object-cover border-[3px] border-black;
}
/* idea details */
.divider {
@apply border-dotted bg-zinc-400 max-w-4xl my-10 mx-auto;
}
.view_skeleton {
@apply bg-zinc-400 h-10 w-24 rounded-lg fixed bottom-3 right-3;
}
/* navbar */
.avatar {
@apply p-0 focus-visible:ring-0 bg-none rounded-full drop-shadow-md !important;
}
.dropdown-menu {
@apply w-56 border-[5px] border-black bg-white p-5 rounded-2xl !important;
}
.login {
@apply border-[
