Project Create - পাইথন বাংলা টিউটোরিয়াল

Here is your step-by-step guide to create a React project using Vite with the project name mrs.

✅ 1. Open your terminal

✅ 2. Run the following command

npm create vite@latest mrs -- --template react

🔍 Explanation:

npm create vite@latest – runs the Vite project creator.
mrs – your project folder name.
--template react – uses the React template for Vite.

✅ 3. Change directory to your project

cd mrs

✅ 4. Install dependencies

npm install

✅ 5. Start your development server

npm run dev

🎉 Your React + Vite project `mrs` is ready and running locally!

Local URL will look like:

http://localhost:5173/

If you want, I can guide you next on:

Adding Tailwind CSS to this project
Folder structure best practices
Connecting with an API
Deployment steps

Let me know your next task.

Install Dependencies:

Install Tailwind CSS for styling and other required dependencies

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind CSS:

Replace the contents of tailwind.config.js with:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        inter: ['Inter', 'sans-serif'],
        gilroy: ['Gilroy-Bold', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Create or update src/index.css with:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Add Gilroy font if available, or fallback to a similar bold font */
@font-face {
  font-family: 'Gilroy-Bold';
  src: local('Arial Black'), local('Arial-Bold'), url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
  font-weight: bold;
}

Clean Up Default Files:

Delete src/App.jsx and src/assets folder.
Create a new folder structure: src/screens/LuckySpinPage, src/screens/LuckySpinPage/sections, and src/screens/LuckySpinPage/data.

Mrs