I built PostHub as a dynamic, single-page application (SPA) that serves as a community blog platform. This project showcases my ability to create modern, interactive web applications using vanilla JavaScript, while demonstrating best practices in frontend development.
The application fetches real-time data from the DummyJSON API and provides an engaging user experience with features like post browsing, detailed post views with comments, user profiles, and a contact form.
Through this project, I'm developing and refining several key frontend development skills:
- Asynchronous programming with
async/await - Complex state management without frameworks
- Dynamic DOM manipulation and event handling
- Error handling and user feedback
- API integration and data caching strategies
- Single Page Application (SPA) architecture
- Hash-based routing and navigation
- Modular code organization
- Performance optimization through caching
- Mobile-first responsive design
- Responsive layouts with CSS Grid and Flexbox
- Touch-friendly interfaces (44px minimum touch targets)
- Smooth animations and transitions
- Modal dialogs and overlays
- Loading states and error handling
- Accessible form design with validation
- Git branching strategies (feature branches, bug fixes)
- Semantic commit messages
- Incremental development approach
- Code refactoring and cleanup
- ** Post Browsing**: Load and display blog posts with pagination
- ** Post Details**: View full post content with comments
- ** User Profiles**: Click on authors to view their profile information
- ** Interactive Modals**: User profile modal with complete information
- ** Comments System**: View all comments for each post
- ** Contact Form**: Functional contact form with validation
- ** Fully Responsive**: Optimized for mobile, tablet, and desktop
- ** Performance**: Client-side caching for faster subsequent loads
- ** Modern UI**: Clean, professional design with smooth animations
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- A local web server (optional but recommended)
Simply open index.html in your web browser.
Using Python:
# Python 3
python -m http.server 8000
# Then visit: http://localhost:8000Using Node.js (with npx):
npx serve
# Or with http-server
npx http-serverUsing VS Code: Install the "Live Server" extension and click "Go Live" at the bottom right.
DynamicWebsite02/
│
├── index.html # Main HTML structure
├── style.css # All styling and responsive design
├── script.js # Application logic and API integration
└── README.md # This file
I learned to handle complex asynchronous operations, managing multiple API calls efficiently while maintaining a smooth user experience. Implementing proper loading states and error handling taught me the importance of user feedback during async operations.
Building this without a framework like React forced me to deeply understand state management. I created a global appData object to manage posts, users, and loading states, which taught me why frameworks exist and how to architect data flow in applications.
I implemented caching strategies for user data to minimize API calls, learned about the importance of debouncing/throttling, and optimized DOM manipulation by batching updates. These practices significantly improved the application's performance.
Working with mobile-first design taught me to think about touch interactions, viewport sizes, and progressive enhancement. I learned that good responsive design isn't just about media queries—it's about creating flexible, adaptable layouts from the start.
I discovered that handling errors gracefully is as important as the happy path. Providing clear error messages, fallback content, and recovery options significantly improves user trust and satisfaction.
As the project grew, I learned to organize code into logical, reusable functions, write clear comments, and maintain consistent naming conventions. This made debugging much easier and the codebase more maintainable.
Using feature branches for new functionality and separate bug-fix branches taught me professional development workflows. Writing semantic commit messages helped me track changes and understand the project's evolution.
Working with a RESTful API taught me about HTTP methods, status codes, data parsing, and handling different response scenarios. I also learned the importance of reading API documentation and planning data structures.
I encountered and fixed various bugs (parameter naming, typos, CSS specificity issues), which sharpened my debugging skills and taught me to test thoroughly before considering a feature complete.
Small issues like incorrect quote characters, typos in property names (length vs lenght), and missing CSS classes taught me the importance of careful code review and the value of consistent coding practices.
- HTML5: Semantic markup for structure
- CSS3: Modern styling with Flexbox, Grid, animations, and media queries
- Vanilla JavaScript (ES6+): No frameworks, pure JavaScript
- DummyJSON API: External REST API for data
- Git: Version control and branching strategies
// User data is cached to avoid redundant API calls
if (appData.users[userId]) {
return appData.users[userId]; // Return from cache
}
// Only fetch if not in cacheAll interactive elements maintain a minimum 44px touch target for mobile accessibility.
Implemented with keyboard navigation (Escape key), click-outside-to-close, and smooth animations.
Every API call is wrapped in try-catch blocks with user-friendly error messages.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile-First: Designed for mobile, enhanced for desktop
- Progressive Enhancement: Core functionality works everywhere
- Accessibility: Proper focus states, keyboard navigation, semantic HTML
- Performance: Optimized images, efficient DOM updates, caching
While this project is feature-complete for its scope, potential enhancements could include:
- Search and filter functionality for posts
- User authentication and personalized feeds
- Dark mode toggle
- Infinite scroll instead of "Load More" button
- Local storage for offline support
- Share buttons for social media
- Post bookmarking/favoriting
I'm a frontend development student at Högskolan Kristianstad, passionate about creating engaging, accessible, and performant web applications. This project represents my growth in understanding modern web development practices and my commitment to writing clean, maintainable code.
This is a student project created for educational purposes.
Built as part of my Frontend Development course