🎨⚛️ Hack@Brown CSS-React Starter Pack

Welcome to the Hack@Brown CSS-React Starter Pack! This resource merges our CSS Starter Kit and React Starter Kit into one unified experience — designed to help hackers quickly get started building beautiful, responsive web apps from scratch.

You’ll find:

• css-starter/my-css-app → Learn CSS fundamentals and styling.
• react-starter/my-app → Learn React + Next.js fundamentals for interactive UIs.

🚀 Getting Started

1. Clone and install both apps git clone cd hackatbrown-starter

   Then install dependencies for both apps: cd css-starter/my-css-app && npm install cd ../../react-starter/my-app && npm install

2. Run both apps simultaneously Each app already has its own .env.local file to prevent port conflicts:

   • Next.js app (React) → runs on http://localhost:3000
   • CSS app (CRA) → runs on http://localhost:3001

   To start them:

   In one terminal

   cd react-starter/my-app npm run dev # for development

   In another terminal

   cd css-starter/my-css-app npm start

   💡 If you see “Could not find a production build,” that means you ran npm start in the Next.js app. For production mode, use npm run build && npm start

🎨 CSS Starter Kit Overview

CSS (Cascading Style Sheets) defines the look and feel of HTML elements — text, colors, layout, and animations. Created by W3C, CSS lets you separate style from structure for cleaner, scalable code.

🌟 Goal For beginners who want to understand how websites are styled, this starter walks through key CSS concepts and how they interact with HTML inside a simple React sandbox.

🔍 Core Concepts

• Selectors — choose HTML elements to style (h1, .class, #id)
• Properties & values — define visual rules (color: blue;, font-size: 20px;)
• Flexbox — layout system for responsive design (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

🧩 Try It Out Run the CSS app and explore how changes in App.css affect elements in App.js. You’ll see 3 menu cards — your tasks are to modify, style, and enhance them.

💻 Tasks

1. Center the heading with text-align and margin.
2. Add spacing around .menucard using display: flex; justify-content: center;.
3. Add padding inside each card (padding: 1rem;).
4. Make cards responsive with flex-wrap: wrap;.
5. Add shadows and rounded corners using box-shadow and border-radius.
6. Contain overflowing images with overflow: hidden;.
7. Add hover effects using transform: scale(1.1);.
8. Stack cards on mobile with a @media query (≤600px).
9. Improve typography by adjusting font sizes and spacing.
10. Ensure consistent styling and color readability.
11. Add accessibility with aria-label attributes.

🧠 Helpful Resources

• CSS reference (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
• CSS Color Names: https://www.cssportal.com/css3-color-names/
• Flexbox Froggy Game: https://flexboxfroggy.com/
• HTML + CSS cheatsheet: https://htmlcheatsheet.com/css/

⚛️ React + Next.js Starter Overview

React is the most widely used JavaScript library for building interactive UIs. This kit includes a Next.js + TypeScript setup — the same stack used in many modern web apps.

🏗️ How It Works React lets you compose UIs from reusable components. Next.js enhances this with:

• Routing — each file in app/ becomes a page
• Server-side rendering
• Simple deployment

Learn more:

• React Docs: https://react.dev/
• Next.js Learn Guide: https://nextjs.org/learn

🧰 Useful Add-ons

• Tailwind CSS — utility-first CSS framework (https://tailwindcss.com/docs/guides/create-react-app)
• Material UI — pre-built React components (https://mui.com/material-ui/getting-started/installation/)

🧑‍💻 Running and Editing In the my-app folder: npm run dev

Visit http://localhost:3000

Open src/app/page.tsx to edit content — it should begin with: "use client"; import { useState } from "react";

This allows the component to use React hooks interactively.

💻 Tasks Below is the quick-start checklist; find the expanded explanations in react-starter-tasks.md.

1. Explore the app/ directory to understand file-based routing and confirm app/page.tsx renders at http://localhost:3000.
2. Convert app/page.tsx into a client component (if needed) and add a useState theme toggle controlled by a button.
3. Create app/components/Hero.tsx that accepts title and subtitle props, rendering it from page.tsx.
4. Style the hero using CSS Modules via app/page.module.css, ensuring typography remains responsive.
5. Define a resources array and map over it in page.tsx to render learning resource cards.
6. Build a controlled email signup form with useState, preventing reload on submit and showing a confirmation message.
7. Move the resource list into an async server component app/components/ResourceList.tsx and import it into page.tsx.
8. Add an API route app/api/echo/route.ts that returns JSON and fetch it from a client component to display the response.
9. Improve accessibility with semantic HTML, descriptive labels, and visible keyboard focus states.
10. Replace static <img> tags with Next.js <Image> components and export metadata from app/layout.tsx for SEO.
11. Create app/error.tsx to handle unexpected errors gracefully and test it locally.
12. Run npm run lint and npm run build, noting any deployment requirements for services like Vercel.

🗂️ Repository Structure

hackatbrown-starter/ │ ├── css-starter/ │ └── my-css-app/ (Create React App sandbox for CSS practice) │ └── react-starter/ └── my-app/ (Next.js + React + TypeScript app)

🧩 Tips for Hackathon Projects

• Use React (Next.js) for dynamic or multipage web apps.
• Use CSS Starter to polish your layout and visual design.
• Combine both skills: add custom CSS or Tailwind to your React app.
• Don’t be afraid to experiment — you can’t break the internet (locally 😉).

🏁 Summary

Happy hacking from the Hack@Brown Dev Team 💛