create a login page which only accept sig in by google , create home page where export interface CodeforcesContest { id: number; name: string; phase: string; durationSeconds: number; startTimeSeconds: number; relativeTimeSeconds: number; type: string; } this contests will be listed with scroll and pagination method with filter option by division 1 , 2 , 3 , 4 or any on clicking of any event user should get option of scheduling , add profile page as well which will display user details recived from google oauth , and one more page for upcoming event where all google schedule codeforce event will be displayed
I'll create a Next.js application with Google authentication, Codeforces contest listing, and scheduling functionality. Let's start by building this step by step.
This application provides a complete Codeforces contest scheduler with Google authentication. Here's what I've implemented:
Authentication:
Home Page (Contest List):
Profile Page:
Upcoming Events Page:
Scheduling Functionality:
To use this application, you'll need to:
Set up Google OAuth credentials and add them as environment variables:
The application uses Next.js App Router with server components for the page structure and client components for interactive elements. The UI is built with shadcn/ui components and styled with Tailwind CSS.
Please make sure to add the following environment variables to your project:
npx shadcn@latest add "https://v0.dev/chat/b/b_qfBIUXQJzaZ?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..xkcLug64vbZqHoi2.bhc2CATnKDsPmE5zBwaWylv2cvZYv61GZeosdFEPX8BRTZFe-Us8m415NzY.JScQuCmpmTDAAEyLN4UosA" Need to install the following packages: shadcn@2.4.0 Ok to proceed? (y) y
✔ You need to create a components.json file to add components. Proceed? … yes ✔ Which color would you like to use as the base color? › Neutral ✔ Writing components.json. ⠙ Checking registry.
Something went wrong. Please check the error below for more details. If the problem persists, please open an issue on GitHub.
The component at https://ui.shadcn.com/r/styles/new-york-v4/toast.json was not found. It may not exist at the registry. Please make sure it is a valid component.
I see you're trying to add shadcn components from a v0.dev URL, but you're encountering an error because the block at that URL is no longer available or accessible. The screenshot shows a "Block Not Found" error page.
Instead of trying to add components from a URL that doesn't exist, let's set up shadcn/ui properly in your project. Here's how to do it:
npx shadcn@latest init
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add avatar
npx shadcn@latest add dropdown-menu
npx shadcn@latest add dialog
npx shadcn@latest add select
npx shadcn@latest add skeleton
npx shadcn@latest add toast
This will properly install all the components needed for the Codeforces scheduler application we created. The components will be added to your project's components/ui
directory, and you can import them as shown in the code.
If you're starting from scratch, you can also add the components as you need them while building the application.
dont use toas use sooner