Friends as First Clients
Friends are great first clients because:
- They are honest and critical when needed, yet empowering
- Word of mouth often starts with them
- Less pressure — they are less likely to be annoyed if something goes wrong
Step 1: The Client’s Vision
A couple of my friends, who are passionate about biology and current research, wanted a weekly news site to share their student-written articles. They wanted it to be:
- Clean and responsive, especially for mobile devices
- Easy to add articles weekly via an admin portal
- Branded with their greenish-dark theme
- Hosted simply (no WordPress or Wix complexity, which they found stressful)
They offered me around £30 — not a lot, but enough to showcase my skills, build something real, and secure a portfolio win.
Step 2: The Tech Stack
- React — fast front-end with reusable components, improving over plain HTML
- TypeScript (TSX) — stronger type safety and scalability compared to JavaScript
- Tailwind CSS — modern utility-first styling
- Supabase — free backend with simple authentication
- Netlify / DNS — quick Git deployment to domains managed via nameservers, with no hosting fees under quota limits
Step 3: The Building Process
I knew I needed a full evening for this project, so I allocated time strategically:
- ~1 hour for styling, UI, and device responsiveness
- ~3 hours for database setup and the article editor system
- ~2 hours for edits and bug fixes
Features Implemented
- Homepage displaying the latest three articles
- All articles page sorted by date
- Individual article pages with formatted rich content
- Fully responsive layout across desktop and mobile
- Modern UI using Tailwind CSS with animations
- Admin dashboard to view, create, and manage articles
- Markdown-supporting text editor (mobile-optimised, including fonts, links, images, and videos via an external API)
Step 4: Outcome & Maintenance
My friends were very pleased with the final system and website. They have started writing articles and are aiming for roughly two per week between the three of them.
Manual maintenance is important to keep minimal for developers. I reduced ongoing effort by thoroughly testing the web app across multiple devices in the days following delivery.
Visit the completed website: www.bionewsweekly.com