Splashing News is a modern news platform that serves readers with current stories and gives editors an easy-to-use dashboard to manage content. Readers can browse headlines, explore categories, and read full articles, while administrators can publish, edit, and track posts from any device. The interface stays fast and intuitive even with large volumes of content, so the focus stays on the stories themselves.
This is the client-side application that powers the Splashing News website. It combines a public-facing news experience with a protected admin console, all in one React application. On the public side, visitors can explore the latest news, filter by categories like Politics or Business, search for articles, and view detailed posts with images and engagement stats. The admin area gives editorial staff a dashboard to see metrics, manage posts (create, edit, delete), and monitor publication activity. The entire app is built to feel fast, with skeleton loaders, toast notifications, and responsive design that works well on mobile, tablet, and desktop.
- Public news browsing — Homepage with hero articles, sub-hero highlights, latest news, and category-specific sections.
- Category navigation — Dedicated routes for topics like Politics, Business, Health, Sports, and more.
- Article detail view — Full post content with featured images, view counts, likes, comments, and reading time.
- Search — Instant search from the admin top bar that fetches results as you type and links directly to posts.
- Skeleton loading states — Custom skeleton cards and table skeletons keep the interface feeling responsive while data loads.
- Admin dashboard — Overview with stats (total posts, views, categories, published/draft counts, recent articles).
- Posts management — Table view with search, filter by category and status, pagination, edit and delete actions.
- Create and edit posts — Form with title, category selection, status, featured image upload (drag-and-drop supported), and content body.
- Modal dialogs — Edit and delete confirmations appear in accessible, branded modals.
- Authentication flow — Login form with validation, token storage, session refresh, and automatic logout on expiration or network errors.
- Responsive design — Fully responsive layouts with a mobile-friendly bottom navigation in the CMS and a clean public grid.
- Toast notifications — User feedback for successes, errors, and loading states via
sonner.
| Technology | Purpose |
|---|---|
| React | UI library |
| TypeScript | Type-safe JavaScript |
| Vite | Build tool and dev server |
| TailwindCSS | Utility-first CSS framework |
| Axios | HTTP client for API requests |
| TanStack React Query | Server-state management and caching |
| React Router | Client-side routing |
| Formik | Form state management |
| Yup | Schema-based form validation |
| Sonner | Toast notifications |
| Lucide React | Icon set |
| React Icons | Additional icon library |
Zenith Dev
- Email: hello@zenithdevtech.name.ng
- Website: Zenith Dev Tech
- GitHub: youngbeeh08