Cannanews — Cannabis News Portal React JS Website Template

About This Item

Cannanews React is a modern, bold Cannabis News Magazine web application built as a fully functional React 18 app using Vite and Bootstrap 5. It ships with 13+ page-level components, a blog module, all built with modern functional React and zero class components.

Built for React developers delivering cannabis news portals and magazine sites. The codebase uses hooks exclusively — useState, useEffect, useContext, useRef, and custom hooks for state management and side effects. Every UI section — the breaking-news ticker, category news feeds, and featured-story video popup — is an isolated, reusable component. Swap the static JSON data sources for any REST API or headless CMS and the editorial UI layer is immediately production-ready.

Everything in the Package

• 13+ page-level React components with React Router v6 client-side routing
• React 18 with Vite — fast HMR dev server and optimised production build out of the box
• React Router v6 — client-side routing with lazy-loaded page components via React.lazy()
• Bootstrap 5 — responsive grid and utility classes, no jQuery dependency
• React Context and useReducer for global state management (category filters, breaking-news ticker, UI state)
• React Hook Form — field validation, error messages, and submission state on the newsroom contact form
• Swiper React — touch-friendly featured-story carousels via SwiperSlide components
• All data sourced from typed JSON files in src/data/ — swap to fetch() or axios for live news API
• Retina-ready, fully responsive from 320px to 1920px+
• ESLint configured — Airbnb ruleset with React Hooks plugin
• React Helmet Async — per-route title and meta description for SEO
• PropTypes defined on every component for clear prop contracts

Component Architecture

• Page components map 1:1 to routes — each in its own file under src/pages/
• Shared components: Navbar, Footer, BackToTop, breaking-news ticker, and article cards and widgets
• Custom hooks encapsulate side effects and shared logic — separate from JSX templates
• React.lazy() and Suspense applied to secondary page bundles — code-split on route change
• FilterContext wraps the router at root level — category state accessible on every route
• useReducer manages complex state (category filters, multi-step forms) — predictable action/state flow
• Folder structure: src/pages/, src/components/, src/hooks/, src/context/, src/data/

All 13 Pages

• /home-v1 — Editorial hero with featured stories and category news feeds
• /home-v2 — Alternate magazine-style home layout
• /home-v3 — Third home variant with distinct article arrangement
• /category — News category archive, layout one
• /category-2 — Category archive, layout two
• /category-3 — Category archive, layout three
• /category-4 — Category archive, layout four
• /category-5 — Category archive, layout five
• /blog-details — Full article view, layout one
• /blog-details-2 — Full article view, layout two
• /contact — Editorial newsroom contact form and submission info
• /404 — Custom branded error page

Key Features

• 13 Fully Designed HTML5 Pages across home, news categories, articles, and contact
• 3 Unique Home Layouts — distinct editorial hero styles and article arrangement variants
• Bootstrap 5 — responsive, mobile-first grid system
• 5 Category Archive Layouts — five distinct news category page styles for Politics, World, Sport, Business and Lifestyle
• Blog Article Detail Pages — two full article page layout variants with social share
• Breaking news ticker and featured-story video popup
• 404 Page — custom branded error page
• Contact Page — editorial newsroom contact form and submission info
• Well Documented — step-by-step documentation for easy setup & customisation
• Cross-Browser Compatible — Chrome, Firefox, Safari, Edge, Opera

Performance and SEO

• React Helmet Async sets per-route title and meta description for SEO on every page component
• React.lazy() and Suspense code-split secondary route bundles — home route loads fast
• Vite production build applies Rollup tree-shaking, chunk splitting, and asset hashing automatically
• All images carry descriptive alt props meeting WCAG 1.1.1
• Google Fonts loaded with font-display: swap to prevent invisible-text flash
• Lighthouse-optimised component structure — no unnecessary re-renders via memo and useCallback where needed

Use Cases

• Cannabis News & Magazine Publishers: Launch a fast, interactive React news SPA without building from scratch
• Frontend Developers: Hooks-first architecture with useState, useContext, and custom hooks — extend confidently
• Freelancers and Agencies: Deliver a polished cannabis news portal to clients using React with minimal setup time
• Startups: Production-ready Vite build, React Router v6, and component tree ready to wire to any headless CMS or news API

Credits and Dependencies

• React 18 — MIT License
• Vite — MIT License
• React Router v6 — MIT License
• Bootstrap 5 — MIT License
• React Hook Form — MIT License
• React Helmet Async — MIT License
• Swiper React — MIT License
• Font Awesome 6 — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT
• Google Fonts — SIL Open Font License
• Demo images: Unsplash — Unsplash License (free for commercial use, no attribution required)
• Demo images: Freepik — Freepik License (free for commercial use with attribution)
• All demo images are for preview purposes only and are NOT included in the download.