senior-scene v1.2.12
Senior Scene
Use the init command to initialize dependencies for a new project:
npx senior-scene@latest init
Run the following command to start the development server:
npm run dev
Introduction
Hello, awesome developers! Get ready to embark on a magical journey where we transform a blank slate into a React front-end masterpiece. šØšØāš»āØ
What's Cooking?
This script is like a gourmet recipe for setting up a React project with Vite and Tailwind CSS. It's spicy with a touch of sweetness, ensuring your project looks good and runs smoothly.
Ingredients
- Vite and React: The bread and butter of our project.
- Tailwind CSS: For styling that's as easy as pie.
- PostCSS and Autoprefixer: They're like kitchen helpers making sure your CSS looks great in all browsers.
- Shadcn UI: A secret sauce for UI components.
- React Router: To navigate through your app like a GPS.
Step-by-Step Guide
- Creating the Project: We start with
npm create vite@latest
to summon a new React project from the digital ether. - Adding Style:
npm install -D tailwindcss postcss autoprefixer
brings in Tailwind CSS, making your app look like it walked off a fashion runway. - Tailwind Configuration: With a few echoes, we tell App.css to embrace Tailwind's beauty.
- JS Superpowers: Update jsconfig.json to make importing components feel like teleporting.
- Vite Config Magic: We then write an enchanting spell in vite.config.js to make sure our paths are as clear as a summer sky.
- Node Types and More: A dash of @types/node and some tasty libraries like lucide-react and @tanstack/react-table to add more flavors.
- Component Galore: Here comes the fun part! We use Shadcn UI to add a plethora of components like a wizard conjuring spells.
- Routing Like a Pro: Set up react-router-dom to navigate around your application like a starship captain.
- File Structure Fun: We create a neat and tidy folder structure, ensuring everything is in its right place.
- Themes and Toggles: Because everyone loves a little customization, right?
- Run, Forest, Run!: Finally,
npm run dev
to bring your project to life. It's alive! š§āāļø
Project structure
.
āāā node_modules/
āāā public/
ā āāā vite.svg
āāā src/
āāā assets/
ā āāā react.svg
āāā components/
ā āāā features/
ā āāā accordion.jsx
ā āāā alert-dialog.jsx
ā āāā alert.jsx
ā āāā avatar.jsx
ā āāā button.jsx
ā āāā calendar.jsx
ā āāā card.jsx
ā āāā collapsible.jsx
ā āāā combobox.jsx
ā āāā command.jsx
ā āāā context-menu.jsx
ā āāā data-table.jsx
ā āāā date-picker.jsx
ā āāā dialog.jsx
ā āāā ... (more files)
ā āāā ui/
ā āāā accordion.jsx
ā āāā alert-dialog.jsx
ā āāā alert.jsx
ā āāā aspect-ratio.jsx
ā āāā avatar.jsx
ā āāā badge.jsx
ā āāā button.jsx
ā āāā calendar.jsx
ā āāā card.jsx
ā āāā checkbox.jsx
ā āāā collapsible.jsx
ā āāā command.jsx
ā āāā context-menu.jsx
ā āāā dialog.jsx
ā āāā dropdown-menu.jsx
ā āāā form.jsx
ā āāā hover-card.jsx
ā āāā input.jsx
ā āāā label.jsx
ā āāā menubar.jsx
ā āāā navigation-menu.jsx
ā āāā popover.jsx
ā āāā progress.jsx
ā āāā radio-group.jsx
ā āāā scroll-area.jsx
ā āāā select.jsx
ā āāā separator.jsx
ā āāā sheet.jsx
ā āāā skeleton.jsx
ā āāā slider.jsx
ā āāā switch.jsx
ā āāā table.jsx
ā āāā tabs.jsx
ā āāā textarea.jsx
ā āāā toast.jsx
ā āāā toaster.jsx
ā āāā toggle-group.jsx
ā āāā toggle.jsx
ā āāā tooltip.jsx
ā āāā use-toast.js
ā āāā theme-toggle.jsx
āāā context/
ā āāā theme-context.jsx
āāā lib/
ā āāā utils.js
āāā pages/
ā āāā home.jsx
ā āāā App.jsx
āāā index.css
āāā main.jsx
āāā .eslintrc.cjs
āāā .gitignore
āāā components.json
āāā index.html
āāā jsconfig.json
āāā package-lock.json
āāā package.json
āāā postcss.config.js
āāā README.md
āāā tailwind.config.js
āāā vite.config.js
Conclusion
And there you have it, folks! A complete setup for a front-end project that's as easy as baking a cake ā maybe even easier if you're not good at baking. š°
Happy Coding! š
This document aims to provide a clear, enjoyable, and informative guide to understanding and navigating your script for setting up a front-end project.
License
MIT License
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago