A modern, responsive news website built with React and Vite, following the Atomic Design methodology. Inspired by ABS-CBN's news platform, this project showcases best practices in component architecture and responsive web design.
- Top Story Hero Section - Featured article with large image and headline
- Article Grid Layout - 2x4 grid displaying article headlines with categories
- Sub Stories Section - 4-column grid of secondary stories with images
- Brand News Carousel - Horizontal scrolling sponsored content with navigation arrows
- Fully Responsive - Optimized for mobile, tablet, and desktop devices
- Atomic Design Architecture - Scalable and maintainable component structure
- React Router - Client-side routing for seamless navigation
- Modern CSS - Custom properties, Grid, Flexbox, and responsive design patterns
- Node.js 16+ and npm/yarn installed
- Git installed
-
Clone the repository
git clone https://github.com/yourusername/abs-react.git cd abs-react -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
npm run build
npm run previewabs-react/
├── src/
│ ├── components/
│ │ ├── atoms/ # Basic building blocks
│ │ │ ├── Button/
│ │ │ ├── CategoryTag/
│ │ │ ├── Container/
│ │ │ ├── Heading/
│ │ │ ├── Image/
│ │ │ ├── Input/
│ │ │ ├── Label/
│ │ │ └── Text/
│ │ ├── molecules/ # Simple component groups
│ │ │ ├── ArticleCard/
│ │ │ ├── BrandNewsCard/
│ │ │ ├── Card/
│ │ │ ├── FormField/
│ │ │ ├── SearchBar/
│ │ │ └── SubStoryCard/
│ │ ├── organisms/ # Complex component sections
│ │ │ ├── BrandNewsSection/
│ │ │ ├── ContactForm/
│ │ │ ├── Footer/
│ │ │ ├── Header/
│ │ │ ├── NewsGrid/
│ │ │ ├── SubStoriesGrid/
│ │ │ └── TopStory/
│ │ └── templates/ # Page layouts
│ │ └── MainLayout/
│ ├── pages/ # Complete pages
│ │ ├── BrandNewsPage/
│ │ ├── ContactPage/
│ │ └── HomePage/
│ ├── data/ # Static data
│ │ └── topStoryData.json
│ ├── styles/ # Global styles
│ │ ├── tokens.css
│ │ └── global.css
│ ├── App.jsx
│ └── main.jsx
├── public/
├── package.json
├── vite.config.js
└── README.md
This project follows the Atomic Design pattern:
Basic building blocks (buttons, inputs, headings, images)
Simple component groups (article cards, form fields, search bars)
Complex sections (header, footer, news grids, carousels)
Page layouts and structure
Complete pages with real content
- React 18.2.0 - UI library
- Vite 5.0.8 - Build tool and dev server
- React Router 6.20.0 - Client-side routing
- CSS3 - Styling with custom properties, Grid, and Flexbox
- ESLint - Code linting and quality
Main landing page featuring:
- News Grid (Top Story + Article Headlines)
- Sub Stories Grid
- Brand News Section
Dedicated page displaying all brand news items in a 2x4 responsive grid
50/50 split layout with Top Story on the left and article headlines in a 2x4 grid on the right
Horizontal scrolling carousel with:
- Navigation arrows
- Sponsored content cards
- Responsive design
The project uses convenient path aliases for clean imports:
import Button from '@atoms/Button';
import ArticleCard from '@molecules/ArticleCard';
import Header from '@organisms/Header';
import MainLayout from '@templates/MainLayout';
import HomePage from '@pages/HomePage';Configured aliases:
@→/src@atoms→/src/components/atoms@molecules→/src/components/molecules@organisms→/src/components/organisms@templates→/src/components/templates@pages→/src/pages@utils→/src/utils@styles→/src/styles
/- Home page/contact- Contact page/brand-news- All brand news items
- Mobile: < 576px
- Tablet: 576px - 1024px
- Desktop: > 1024px
Contributions are welcome! Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
- Design inspired by ABS-CBN News
- Built with React
- Powered by Vite
- Atomic Design by Brad Frost
For questions or feedback, please open an issue on GitHub.
Made with ❤️ using React and Atomic Design