A modern, responsive, full-stack technical blog application built with a sleek Developer Aesthetic, that fetches and displays live articles via the Dev.to API. Featuring dynamic dark/light mode themes, article search and sorting, terminal-style design accents, and an interactive contact form.
Developer Aesthetic UI: Sleek glassmorphism cards, animated background glow, and monospaced terminal accents (Fira Code).
Dynamic Theme Toggle: Switch seamlessly between Dark Mode and Light Mode.
Search & Sort: Instant client-side filtering by article title/keyword, along with flexible sorting (Newest, Oldest, A-Z, Z-A).
Responsive Design: Fully adapted for all screen sizes using Bootstrap 5 and custom CSS.
Interactive Contact Form: Built-in contact section with async status handling.
Back to Top: Smooth scroll-to-top feature for enhanced UX.
##Tech Stack
Framework: React.js (Vite)
Styling: Bootstrap 5, Custom CSS3, FontAwesome Icons
HTTP Client: Axios
Typography: Google Fonts (Fira Code, Inter)
Runtime: Node.js Framework: Express.js Database: PostgreSQL
Make sure you have the following installed on your machine:
- Node.js (v16 or higher)
- PostgreSQL
- Git
-
Clone the Repository: git clone https://github.com/NuriyaMN/Tech-Blog cd tech-blog
-
Backend setup: cd server npm install
Configure your PostgreSQL database credentials in .env or your database configuration file. Start the server: npm start
(Server runs on http://localhost:5000)
- Frontend setup: cd ../client npm install npm run dev
(App runs on http://localhost:5173 or as indicated by Vite)
- Project structure:
tech-blog/ ├── client/ # React Frontend (Vite) │ ├── src/ │ │ ├── components/ # Navbar, Articles, ContactForm, ScrollToTop │ │ ├── App.jsx # Root Component │ │ ├── index.css # Dynamic Theme Styling & CSS Variables │ │ └── main.jsx │ └── index.html └── server/ # Express Backend & API routes