A frontend clone of Firstpost, an Indian online news and media site. This project recreates the look and core reading experience of the original: homepage stories, category pages, article view, user accounts, and an admin flow for publishing news.
Live demo: https://firstpost-clone.netlify.app
Firstpost is part of the Network18 media group. This clone is a static HTML, CSS, and JavaScript app that loads news from a JSON Server API (db.json). Users can browse stories by section, open a full article, sign up and log in, and (as an admin) add or update news.
- Responsive layout for desktop and mobile
- Homepage with Big Story, Head News, and Most Read
- Category pages: India, World, Politics, Auto, Opinion, Sports, Cricket, Entertainment, Tech, Explainers, Health, Art & Culture, and more
- Full article view with share actions
- Sign up and login
- Profile page
- Admin page to create, update, and delete news
- HTML
- CSS
- Bootstrap and MDB
- JavaScript (ES modules)
- JSON Server (mock REST API)
- Git / GitHub
- Netlify (frontend hosting)
firstpost/
├── index.html # Homepage
├── login.html / signup.html
├── profile.html # User profile
├── addnews.html # Admin: create / update news
├── view.html # Single article
├── india.html, world.html, … # Category pages
├── db.json # JSON Server database
├── addtojson.js # Admin API calls
├── components/ # Navbar, footer, shared UI
├── scripts/ # Page-specific JavaScript
└── styles/ # CSS
News and users are stored in db.json under collections such as users, HOME-PAGE, INDIA, WORLD, HEAD-NEWS, and MOST-READ.
- Node.js (v16 or later) so you can run JSON Server
- A modern browser (Chrome, Edge, Firefox)
- Git
git clone https://github.com/Royanosh/firstpost.git
cd firstpostUse a fork URL instead if you are working from your own copy of the repo.
The app talks to a REST API. Locally that API is JSON Server reading db.json.
npm install -g json-serverOr run it without a global install:
npx json-server --watch db.json --port 3000If you installed JSON Server globally:
json-server --watch db.json --port 3000You should see endpoints such as:
http://localhost:3000/usershttp://localhost:3000/HOME-PAGEhttp://localhost:3000/INDIA
Leave this process running while you use the site.
These pages use ES modules, so open them over HTTP rather than as file://.
Option A — VS Code Live Server
- Install the Live Server extension.
- Open
index.htmland choose Open with Live Server.
Option B — Python
python -m http.server 5500Then visit http://localhost:5500.
Option C — Node serve
npx serve .By default, scripts fetch from:
https://firstpost-masai-server.herokuapp.com
That hosted server may be unavailable. For a fully local setup, replace that base URL with http://localhost:3000 in:
scripts/(login, signup, homepage, category pages, profile, article view)addtojson.jscomponents/import.js
After that, reload the site. News, login, signup, and admin writes all go through your local JSON Server.
Open the homepage, pick a category from the navbar, and click a story to read it on view.html.
- Go to Sign up.
- Enter name, username, email, and password (password and repeat password must match).
- Log in from Login.
A seed admin user is defined in db.json. After logging in as that user, the profile page shows an admin link to addnews.html, where you can:
- Publish a story to a category
- Add Head News and Most Read items
- Update or delete existing stories
Regular sign-ups are created with the customer role and do not see the admin tools.
| Area | Main files |
|---|---|
| Layout | components/navbar.js, components/footer.js, components/import.js |
| Shared helpers | components/utility.js (getData, View, logout) |
| Auth | scripts/login.js, scripts/signup.js |
| Profile | scripts/profile.js |
| Admin | addtojson.js, addnews.html |
| Homepage / categories | scripts/index.js and matching scripts/*.js files |
- Website: https://firstpost-clone.netlify.app