https://github.com/nassimtaghipour/blog-reactjs
Building a Blog with React
https://github.com/nassimtaghipour/blog-reactjs
api blogs bootstrap4 es6-javascript es6-modules jsonplaceholder jsonplaceholder-api pagination posts reactjs responsive
Last synced: 7 months ago
JSON representation
Building a Blog with React
- Host: GitHub
- URL: https://github.com/nassimtaghipour/blog-reactjs
- Owner: nassimtaghipour
- Created: 2020-02-03T19:22:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-02T20:06:53.000Z (over 4 years ago)
- Last Synced: 2025-04-20T03:33:11.771Z (8 months ago)
- Topics: api, blogs, bootstrap4, es6-javascript, es6-modules, jsonplaceholder, jsonplaceholder-api, pagination, posts, reactjs, responsive
- Language: JavaScript
- Homepage:
- Size: 1.69 MB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Blog web app developed by React.js and Bootstrap4
Layout
⦁ The page is responsive and adapt to the screen size of the user‘s device.The page should not be larger than 1280px in width and be horizontally centered.
⦁ The page has four sections: a header (yellow), the main content area (green), an area providing context (red) and a footer (purple).
⦁ On small devices,the areas should be vertically stacked
⦁ On larger screens, the context area should be next to the main area on the right side of the page.
Screen width is larger than or equal to 640px | Screen width is smaller than 640px
------------ | -------------
|
Navigation
⦁ The header section should contain a horizontal navigation with 6 top-level items
⦁ Each top-level navigation item should have a list of sub-items which are displayed when hovering the top-level item (see image below).
⦁ On small screens, there won‘t be enough space to fit 6 items next to each other so used sandwitch menu as an solution.
Posts
⦁ The website consists of two types of pages: an overview page and detail pages for fake blog posts
⦁ The data should come from http://jsonplaceholder.typicode.com/
Overview
The overview page should list the titles of all posts. Each post title should link to a detail page for that post. The data can be found here: http://jsonplaceholder.typicode.com/posts/
Detail page
The detail page should display the post title and post content in the main area. The data for a single post can be found here: http://jsonplaceholder.typicode.com/posts/
The context area should display the name and website of the post author. The data for that can be fetched based on the userId of the post from here: http://jsonplaceholder.typicode.com/users/
Project setup:
npm install
npm start