Ever wondered what the internet is feeling right now, or what it was obsessed with last week? WebChronicles is an interactive journey that visualizes the ever-changing mood and headlines of the web. It's a dynamic space where you can explore trending topics, dive into sentiment analysis, and catch up on news highlights—all wrapped up in a beautiful, engaging interface.
We built this project using some fantastic modern tools to ensure it's fast, responsive, and delightful to use:
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
Here is a quick look at how the project is organized under the hood to help you find your way around:
📦 WebChronicles
├── 📂 public
│ ├── logo.png
│ └── og-image.png
└── 📂 src
├── 📂 app
│ ├── 📂 chronicle
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ ├── robots.ts
│ └── sitemap.ts
├── 📂 components
│ ├── DeveloperMenu.tsx
│ ├── FloatingSignal.tsx
│ ├── FocusCard.tsx
│ ├── HeadlineCloud.tsx
│ ├── MoodBackground.tsx
│ ├── NewsFloater.tsx
│ └── TimeSlider.tsx
├── 📂 lib
│ ├── api.ts
│ └── moodMapper.ts
└── 📂 store
└── chronicleStore.ts
Want to run WebChronicles on your own machine? It's super easy. Just follow these steps!
You will need to have Node.js installed on your computer.
-
Clone this repository to your local machine:
git clone https://github.com/Omar-webcloud/WebChronicles.git
-
Hop into the project folder:
cd WebChronicles -
Install all the necessary packages:
npm install
-
Start up the development server:
npm run dev
-
Open up your favorite browser and head over to
http://localhost:3000to see the magic happen!
Enjoy exploring the emotional landscape of the internet! If you find it interesting, feel free to dive into the code and make it your own.