DEV Community

Sushil Barwal
Sushil Barwal

Posted on Edited on

A college notice board in React: a first project for web design students

#webdev #javascript #react #beginners

If you're a student learning web design and you've just finished HTML, CSS and some JavaScript, React can feel like a big jump. The best way across is a small project that you'd actually use. Here's one we give students: a college notice board.

What it does

  • Shows a list of notices (title, department, date).
  • Lets you filter by department.
  • Lets you add a notice through a form.
  • Saves notices in localStorage so they survive a refresh.

That's enough to touch components, props, state, events, forms, lists and effects, without a backend.

Step 1: Set up 

npm create vite@latest notice-board -- --template react
cd notice-board
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Step 2: Model the data 

const starter = [
  { id: 1, title: "Mid-sem exams start 18 Nov", dept: "CSE", date: "2026-11-04" },
  { id: 2, title: "Placement talk in Seminar Hall", dept: "All", date: "2026-11-05" },
];
Enter fullscreen mode Exit fullscreen mode

Step 3: State that persists 

import { useEffect, useState } from "react";

function useNotices() {
  const [notices, setNotices] = useState(() => {
    const saved = localStorage.getItem("notices");
    return saved ? JSON.parse(saved) : starter;
  });
  useEffect(() => {
    localStorage.setItem("notices", JSON.stringify(notices));
  }, [notices]);
  return [notices, setNotices];
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Components

Split it into NoticeList, NoticeCard, DeptFilter and NoticeForm. Pass data down as props, and pass functions like onAdd down so the form can update the list.

function NoticeCard({ notice }) {
  return (
    <article className="card">
      <h3>{notice.title}</h3>
      <p>{notice.dept} · {notice.date}</p>
    </article>
  );
}
Enter fullscreen mode Exit fullscreen mode

Step 5: The filter 

const visible = dept === "All"
  ? notices
  : notices.filter(n => n.dept === dept || n.dept === "All");
Enter fullscreen mode Exit fullscreen mode

Step 6: Make it look good

Use CSS Grid for the card layout and a single media query for mobile. Check it on your phone. Most people who view your portfolio will.

Stretch goals

  • Sort by date, newest first.
  • Mark notices as "important" with a badge.
  • Deploy it and put the live link on your CV.
  • Later, replace localStorage with a small API.

What this teaches

By the end you have used every core React idea a junior interview asks about, and you have something finished to show. That matters more than a long list of half-done tutorials.

We teach this project in the React module of our web designing course for students in Mohali and Chandigarh. The full module list is on the Dzimark Training course page.

Top comments (0)