https://github.com/devphenom/uri-hashtag-insights
https://github.com/devphenom/uri-hashtag-insights
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devphenom/uri-hashtag-insights
- Owner: devphenom
- Created: 2025-04-06T14:44:43.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-04-06T21:01:26.000Z (12 months ago)
- Last Synced: 2025-04-09T22:42:59.422Z (12 months ago)
- Language: TypeScript
- Homepage: https://uri-hashtag-insights.vercel.app
- Size: 3.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hashtag Sentiment Insights
A Next.js application for analyzing social media sentiment trends for any hashtag. Built with Material UI, TypeScript, and @mui/x-charts.
## Overview
This project allows users to:
- Search for hashtags to analyze their sentiment trends
- View interactive charts showing sentiment data over time
- Toggle between light and dark mode
- Browse trending hashtags
## Features
- **Dynamic Routes**: Using Next.js dynamic routing at `/insights/[hashtag]`
- **Interactive Charts**: Visualizing sentiment trends with @mui/x-charts
- **Responsive Design**: Fully responsive UI that works on all device sizes
- **Dark Mode Support**: Theme toggle with persistent preferences
- **Optimized Performance**:
- Data fetching with SWR for caching and revalidation
- React.memo, useMemo, and useCallback for render optimization
- Dynamic imports for code splitting
## Technology Stack
- **Frontend**: Next.js 15 with TypeScript
- **UI Library**: Material UI v7
- **Data Visualization**: @mui/x-charts
- **Data Fetching**: SWR with custom hooks
- **Styling**: MUI theming system with responsive design
## Implementation Details
The application follows a well-structured architecture:
- **API Routes**: Mock API endpoints for simulating hashtag trend data
- **Components**: Reusable UI components with proper memoization
- **Hooks**: Custom hooks for data fetching and business logic
- **Theme**: Centralized theme configuration with dark mode support
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Approach
1. Created a responsive homepage with hashtag search functionality
2. Implemented dynamic routing for hashtag insights pages
3. Added a mock API endpoint to simulate data fetching
4. Built custom hooks using SWR for efficient data fetching
5. Created interactive charts with proper memoization
6. Implemented dark mode theme toggle
7. Optimized for all device sizes with responsive design
## Screenshots
## Time Spent
Approximately 2 hours developing the core functionality, with additional time spent on:
- Performance optimizations
- UI polish and responsive design
- Dark mode implementation
- Adding interactive features