Skip to content

peuan/snippetui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What is the Snippet UI?

We are developers who aim to enhance our CSS skills through practice and challenges on the https://cssbattle.dev website. We have created this platform to record and track our progress.

How to Join Us?

Step 1: Add your name to the contributors' configuration file following this pattern:

config/contributors.ts
{
  "name": "[Name of the file (you can refer to examples from public/battle/[battle level]/[name]_solution.html)]",
  "githubName": "[Your GitHub username]"
}

Step 2: Visit our website at https://css-battle-eta.vercel.app or https://cssbattle.dev and choose the battle you want to participate in.

Step 3: After completing the challenge, place your solution file in the folder corresponding to the battle level you played. For example, if you played battle level 1, your file should be located here:

public/battle/1/[name]_solution.html

(Note: Replace [name] with the file name you used in the contributor file, not your GitHub username.)

Step 4: Create a pull request (PR) and enjoy the fun!

Integrate with ChatGPT

alt text alt text

demo.MOV

Dark/Light Mode

alt text alt text

Home Page

alt text

Playground

alt text

Leaderboard

alt text

Discussions

alt text

SignIn with Github/ Profile

alt text alt text

Realtime Logging

alt text

Resize Panel

alt text

Code Formatter

alt text

Download as image

alt text

Social Share

alt text

Tailwindcss Template

alt text

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.