Build this site, one prompt at a time

1. 1

   Create the project in IntelliJ IDEA

   Foundation

   Start with an empty Spring Boot project made by IntelliJ IDEA itself, then set up the folders, the database and a shared page.

   Do this by hand in IDEA first

   1. Go to File → New → Project and choose Spring Initializr.
   2. Set Name seughost, Group com.seughost, Artifact app, Type Maven, Language Java, Packaging Jar and JDK 25.
   3. Pick the latest Spring Boot 4.x and add: Spring Web, Thymeleaf, Spring Data MongoDB, Spring Security, Validation, Spring Cache Abstraction, Lombok and Spring Boot DevTools.
   4. Click Create and wait for Maven to finish importing.

   Prompt 1 of 4 · Project notes (CLAUDE.md) Copy

   Create a CLAUDE.md at the root of the project so you remember the rules in every new session. Write down: this is SEU Campus Board, a Spring Boot 4 / Java 25 / MongoDB / Thymeleaf app where anyone can post anonymous feelings, confessions and compliments about teachers with no account; the folders (model, dto, repository, service, controller/web, controller/api, exception, config); that a post must never have any author field, not even a hidden one; that only admins have accounts; and how to run and test the app. Also create an AGENTS.md that just points to CLAUDE.md.

   Prompt 2 of 4 · Folders Copy

   I just created an empty Spring Boot 4 project (Java 25, Maven) in IntelliJ. Organise it into the usual folders: model, dto, repository, service, controllers (web and api), exception and config.

   Prompt 3 of 4 · Database Copy

   Connect it to MongoDB Atlas. Use two databases, one for building and testing and one for the live site, so testing never touches real data. Keep the real database link out of git, and let me pick which one to use with a setting. Run it on port 9090 unless a PORT setting says otherwise.

   Prompt 4 of 4 · Home page Copy

   Make a shared page layout (top bar, footer) and a simple home page that uses it. Visitors shouldn't need to log in to see the home page or the static files.

   Checkpoint

   • CLAUDE.md and AGENTS.md exist at the project root and state the no-author rule
   • The green Run button starts the app and the console ends with Started SeughostApplication
   • The home page opens at localhost:9090 with the shared layout
   • Building and the live site use two different databases, and no real database link is in git
2. 2

   Anonymous posts

   Core feature

   Add posts that anyone can write, with no author information anywhere.

   Prompt 1 of 3 · The post Copy

   Add a post that can be a Feeling, a Compliment or a Confession. It has the text, an optional nickname, an optional teacher name, some tags and the time it was posted. It must have no author at all, not even a hidden one. Nobody logs in to post.

   Prompt 2 of 3 · The rules Copy

   Check what people send: the text must be 3 to 1000 characters, the nickname at most 40, a compliment must say which teacher, and there is a limit on tags. If something is wrong, send back a short message the page can show.

   Prompt 3 of 3 · Create and list Copy

   Add a way to create a post and a way to list posts. A new post goes live straight away. Anyone can use both without logging in.

   Checkpoint

   • Sending a valid post (with the IDEA HTTP Client or Postman) gives back the new post
   • Empty or too-short text is refused with a message
   • Nothing saved in the database says who wrote the post
3. 3

   The home page feed

   Frontend

   Show every live post as a card, then add filters, sorting and pages.

   Prompt 1 of 5 · Show the posts Copy

   Show all live posts as cards on the home page, pinned ones first and then the newest. Each card shows the type, the tags, the text, the nickname and how long ago it was posted (like "5 minutes ago"). It should be one column on phones.

   Prompt 2 of 5 · Filters Copy

   Add tabs to filter the posts: All, Feelings, Compliments and Confessions. It should change instantly, without reloading the page.

   Prompt 3 of 5 · Tags and sorting Copy

   Add a tag dropdown made from the tags in the posts, and a sort dropdown with Newest and Most related.

   Prompt 4 of 5 · Pages and empty state Copy

   Show 30 posts per page with Previous and Next buttons. If there are no posts, show a friendly message instead of an empty page.

   Prompt 5 of 5 · Look and feel Copy

   Make it look nice with a light theme and no CSS or JavaScript framework. [Describe your own style here: colours, fonts, how the cards look, any animation.]

   Checkpoint

   • Posts you created show up as cards, newest first, and a compliment shows who it is for
   • The tabs and both dropdowns change the cards instantly
   • With more than 30 posts you get pages, and with none you get the friendly message
   • After editing a page or script, run ./mvnw compile (or Build Project in IDEA) to see the change
4. 4

   The share popup

   Frontend

   Let anyone post from the home page with a small popup.

   Prompt 1 of 4 · Open and close Copy

   Add a big "Share your thoughts..." button on the home page that opens a popup. The popup should close with the X button, by clicking outside it, or with the Esc key.

   Prompt 2 of 4 · Pick a type Copy

   In the popup, first ask what they want to share: a Feeling, a Compliment or a Confession, each with a short description.

   Prompt 3 of 4 · The form Copy

   Then show a form: "To whom" (only for compliments), the message with a live counter (max 1000), an optional nickname, and one optional tag from this list: study, exam, life, love, breakup, friendship, threeam, campus, canteen, gamesroom, funny, rant, gratitude. Keep the Post button switched off until the form is valid.

   Prompt 4 of 4 · Sending Copy

   When someone posts, close the popup, show a small "Posted!" message and refresh the feed. If it fails, show the error inside the form. Old links to /posts/new should just go to the home page.

   Checkpoint

   • The button opens the popup, and X, clicking outside and Esc all close it
   • Only a Compliment shows the "To whom" field, and the Post button stays off until the form is valid
   • Posting shows the message and the new post appears at the top
   • Stopping the app and posting shows an error in the form instead of doing nothing
5. 5

   Reactions and a faster feed

   Core feature

   Let people react to posts with a heart, a report button and a view count, one small request at a time. Then make the home page load faster.

   Prompt 1 of 4 · Heart button Copy

   Put a heart button on every post with a number beside it. When someone taps it, the number should go up straight away, without the page refreshing. People shouldn't need to log in, and don't keep any record of who tapped it.

   Prompt 2 of 4 · Report button Copy

   Put a small flag button on every post so people can report it. Ask "Are you sure?" first, then show a little message saying the report was sent. Only admins should be able to see how many reports a post has.

   Prompt 3 of 4 · View count Copy

   Show a small eye icon on every post with the number of times it has been seen. If counting fails for any reason, don't show the visitor an error.

   Prompt 4 of 4 · Faster home page Copy

   The home page will get slow once there are lots of posts. Please make it load faster, but a new post or a heart tap should still show up straight away. The view numbers can update about once a minute.

   Checkpoint

   • Tapping the heart makes the number go up at once, and it is still there after you refresh
   • The flag asks first and then shows a message. Nobody except an admin can see the report count
   • Opening the home page raises the eye numbers, and a failure never shows the visitor an error
   • A new post shows up straight away, and the view numbers catch up within about a minute
6. 6

   Stop spam and repeat clicks

   Protection

   Stop spam without keeping any record of who did what.

   Prompt 1 of 2 · Post spam Copy

   People shouldn't be able to spam the board. Make someone wait 2 minutes between posts, and let them post 10 times a day at most. If they hit the limit, show a friendly message in the share popup. Don't save anything about this in the database.

   Prompt 2 of 2 · Repeat clicks Copy

   If someone taps the heart or the report button on the same post again, don't count it twice. Show a small message instead. If someone views the same post twice, just count it once and don't say anything.

   Checkpoint

   • Posting again within 2 minutes shows a friendly message in the popup
   • The 11th post in one day is refused
   • Tapping the heart or the flag twice on the same post counts only once and tells you so
   • Refreshing the page many times adds only one view per post
   • Restarting the app resets the limits, and nothing about them is saved in the database
7. 7

   Login and the first admin

   Security

   Add logins, but only for admins. Regular visitors never need an account.

   Prompt 1 of 2 · Login and register pages Copy

   Add a login page and a register page. People log in with their email and password. Only emails that end with @seu.edu.bd can register. If the password is wrong, show an error. Posting and hearts should still work without logging in.

   Prompt 2 of 2 · First person becomes admin Copy

   The first person who registers becomes the admin. After that, nobody else can register: close the register page and hide the link to it. Only admins can open the admin pages.

   Remember this when you put the site online

   1. Register your own account right after the first deploy. Until the first account exists, anyone who finds the register page could become the admin.

   Checkpoint

   • Registering with a gmail address shows an error, and a wrong password shows an error on the login page
   • The first account you register can log in and is an admin
   • After that, the register page sends you to login, and a normal visitor who tries an admin page is sent to login too
   • Posting and hearts still work when you are logged out
8. 8

   The admin dashboard

   Admin

   Build the admin page one piece at a time: reported posts first, then pinning, search, feedback on buttons and users.

   Prompt 1 of 5 · Reported posts Copy

   Make an admin page at /admin/dashboard. The first tab lists the posts people have reported, most reported first. Each one has two buttons: Dismiss (clear the reports and keep the post) and Remove (take the post off the board, but don't delete it for good).

   Prompt 2 of 5 · Pin posts Copy

   Add a Live Posts tab that lists every post on the board. Each row gets a Pin / Unpin button. Pinned posts stay at the top of the board.

   Prompt 3 of 5 · Search and pages Copy

   The Live Posts list will get very long. Add a search box on the right side (it should search the post text and the teacher's name), and Previous / Next buttons. Show 20 posts on each page.

   Prompt 4 of 5 · Loading and messages Copy

   When I press Remove or Pin, nothing shows that it's working. Show a small loading circle on the button, and then a little message saying it worked or failed. When a post is removed, let its row fade away.

   Prompt 5 of 5 · Users tab Copy

   Add a Users tab that shows each person's email and role, with a button to switch their account off or on. Someone whose account is off can't log in.

   Checkpoint

   • A post you reported shows up under Reported. Dismiss keeps it on the board, and Remove takes it off but does not delete it
   • Pin moves a post to the top of the board, and Unpin puts it back
   • Search narrows the list, Previous and Next work, and pinning keeps you on the same page
   • Every button shows a loading circle and a message, and if something fails the button comes back
   • Switching a user off stops them from logging in, and switching them on lets them back in
9. 9

   Card details and tag filter

   Frontend

   Polish what each card shows and how people filter by tag. Send these one at a time and look at the page after each.

   Prompt 1 of 4 · Type labels Copy

   Show the post type on each card with an icon and a colour, for example "Feeling", "Compliment" and "Confession". For a compliment also show who it is for, like "To: Sir Noor".

   Prompt 2 of 4 · Card footer Copy

   Put a footer at the bottom of every card. On the left show the nickname (if there is one), then the time as "5 minutes ago" (the exact time on hover), then the tag. On the right show the report flag and, just to the right of it, the heart with its count.

   Prompt 3 of 4 · Tags first Copy

   Make the tag dropdown list the most common tags first, then all the other tags. Order the common ones by how often they appear in the posts, and add a few more tags such as canteen and gamesroom.

   Prompt 4 of 4 · Custom dropdowns Copy

   Don't use the browser's plain select box for the tag and sort controls. Build our own dropdowns so they match the rest of the page and are the right size on phones.

   Checkpoint

   • Each card shows its type icon, and a compliment shows who it is for
   • The footer has the nickname, time and tag on the left, and the flag then the heart on the right
   • The tag dropdown lists common tags first, and choosing one filters the cards instantly
   • The dropdowns look the same in every browser
10. 10

    Board look and tests

    Polish

    Turn the feed into a pinboard, make it work on phones, then add tests and notes so the project can be maintained.

    Prompt 1 of 4 · Board grid Copy

    Redesign the home page so the posts look like notes pinned to a board: a grid of cards, each with a small pushpin and a slight tilt. Call the site seughost.tech. Keep the top bar simple. [Attach a screenshot of a design you like, if you have one.]

    Prompt 2 of 4 · Mobile Copy

    Make every page work well on a phone: one column of cards, buttons big enough to tap, and nothing that scrolls sideways.

    Prompt 3 of 4 · Tests Copy

    Write tests for the service layer with Mockito (creating posts, hearts, reports, the first-admin rule), tests for the input rules, a test that proves the feed cache really clears when a post changes, and tests for the spam limits. Show me a report of which ones pass.

    Prompt 4 of 4 · Update the notes Copy

    Update CLAUDE.md so it matches the finished app: the spam limits, the cache rules (which actions clear the feed cache and which do not), the admin dashboard tabs, and how to run the tests. Keep it short and accurate.

    Checkpoint

    • The home page looks like a pinboard, with pushpins and tilted notes
    • On a phone-sized window there is one column and no sideways scrolling
    • ./mvnw test finishes with every test passing
    • CLAUDE.md describes the project well enough for a new person to start
11. 11

    Put it online with Render

    Deployment

    Put the site online with its own separate live database and no passwords saved in git.

    Do this yourself in Atlas and Render

    1. In MongoDB Atlas, create a separate prod database user and allow Render to connect under Network Access.
    2. In Render, create a New Blueprint Instance from your GitHub repository.
    3. Paste the prod database link as the value of MONGODB_URI when Render asks.
    4. After the first deploy, open /auth/register and create your admin account.
    5. Then add monitoring: in UptimeRobot, create a free HTTP(s) monitor for your site URL (for example https://seughost.tech) with a 5-minute interval, and add your email for down alerts. This also keeps a free Render service from going to sleep.

    Prompt 1 of 2 · Docker Copy

    Make this app ready to run in Docker. Keep it small, don't run it as the root user, and let it take the port number from the PORT setting.

    Prompt 2 of 2 · Render Copy

    Add a render.yaml so I can put this on Render. Don't put the database link (MONGODB_URI) in git, I'll paste it into Render myself. Use a separate database for the live site, not the one I use while building. Also add a .env.example that lists the settings the app needs.

    Checkpoint

    • docker build . finishes without errors and the container opens the site
    • You cannot find a real database link or password anywhere in the repository
    • The Render deploy finishes and the live site opens
    • You registered your own admin account right after the first deploy
    • UptimeRobot shows your site as Up and sends an alert email if it goes down

That is the whole build. Once every checkpoint passes, you have the full app: anonymous posting, reactions, rate limits, an admin dashboard, a pinboard design, tests and a live deployment.