Episode 10: Final Touches & Deployment

In this final episode, you will:

• Polish small UX and UI details
• Configure metadata (title, favicon)
• Deploy your app to the web (Vercel, Netlify, GitHub Pages)

---

Update soon

1. Add Page Metadata and Favicon

Edit public/index.html:

<title>E-Shop App</title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="description" content="A simple e-commerce app built with React and Tailwind CSS." />

2. Simplify and Unify Button Styles

In tailwind.config.js, you can define a btn class in @layer for cleaner buttons:

// inside tailwind.config.js or a global css file
@layer components {
  .btn {
    @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
  }
}

Then use:

<button className="btn">Add to Cart</button>

3. Add a 404 Page (Optional)

Create src/pages/NotFound.jsx:

const NotFound = () => (
  <div className="text-center mt-20 text-xl">
    <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
    <p>The page you are looking for does not exist.</p>
  </div>
);

export default NotFound;

In App.js:

<Route path="*" element={<NotFound />} />

4. Deployment Options

a) Option 1: Deploy with Vercel

1. Go to vercel.com
2. Connect your GitHub repo
3. Click “New Project”
4. Import your React app repo
5. Hit Deploy

Done! Vercel auto detects Create-React-App.

b) Option 2: Deploy with Netlify

1. Push your code to GitHub
2. Go to netlify.com
3. New site from Git
4. Choose repo, set build as:

Build command: npm run build
Publish directory: build

1. Deploy

c) Option 3: Deploy with GitHub Pages

Install GitHub Pages package:

npm install gh-pages --save-dev

Update package.json:

"homepage": "https://yourusername.github.io/your-repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Then:

npm run deploy