{"id":19178715,"url":"https://github.com/nassimtaghipour/blog-reactjs","last_synced_at":"2025-05-07T21:02:50.520Z","repository":{"id":47333387,"uuid":"238043052","full_name":"nassimtaghipour/Blog-Reactjs","owner":"nassimtaghipour","description":"Building a Blog with React","archived":false,"fork":false,"pushed_at":"2021-09-02T20:06:53.000Z","size":1777,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T03:33:11.771Z","etag":null,"topics":["api","blogs","bootstrap4","es6-javascript","es6-modules","jsonplaceholder","jsonplaceholder-api","pagination","posts","reactjs","responsive"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nassimtaghipour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-03T19:22:14.000Z","updated_at":"2023-09-07T09:44:43.000Z","dependencies_parsed_at":"2022-09-05T00:51:33.998Z","dependency_job_id":null,"html_url":"https://github.com/nassimtaghipour/Blog-Reactjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassimtaghipour%2FBlog-Reactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassimtaghipour%2FBlog-Reactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassimtaghipour%2FBlog-Reactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassimtaghipour%2FBlog-Reactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nassimtaghipour","download_url":"https://codeload.github.com/nassimtaghipour/Blog-Reactjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954376,"owners_count":21830902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","blogs","bootstrap4","es6-javascript","es6-modules","jsonplaceholder","jsonplaceholder-api","pagination","posts","reactjs","responsive"],"created_at":"2024-11-09T10:40:38.992Z","updated_at":"2025-05-07T21:02:50.474Z","avatar_url":"https://github.com/nassimtaghipour.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Blog web app developed by React.js and Bootstrap4\t\n\nLayout\n\n⦁\tThe 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.\n\n⦁\tThe page has four sections: a header (yellow), the main content area (green), an area providing context (red) and a footer (purple).\n\n⦁\tOn small devices,the areas should be vertically stacked\n\n⦁\tOn larger screens, the context area should be next to the main area on the right side of the page. \n\n\nScreen width is larger than or equal to 640px | Screen width is smaller than 640px\n------------ | -------------\n \u003cimg src=\"https://github.com/nassimtaghipour/Blog-Reactjs/blob/master/public/img-desktop.png\" width=\"200\" height=\"200\"\u003e|\u003cimg src=\"https://github.com/nassimtaghipour/Blog-Reactjs/blob/master/public/img-mobile.png\" width=\"200\" height=\"200\"\u003e\n                      \n \n\n\nNavigation\n\n⦁\tThe header section should contain a horizontal navigation with 6 top-level items\n\n⦁\tEach top-level navigation item should have a list of sub-items which are displayed when hovering the top-level item (see image below).\n\n⦁\tOn small screens, there won‘t be enough space to fit 6 items next to each other so used sandwitch menu as an solution.\n\n \u003cimg src=\"https://github.com/nassimtaghipour/Blog-Reactjs/blob/master/public/navigation.png\" width=\"200\" height=\"200\"\u003e\n\n\nPosts\n\n⦁\tThe website consists of two types of pages: an overview page and detail pages for fake blog posts\n\n⦁\tThe data should come from http://jsonplaceholder.typicode.com/\n\nOverview\n\n\nThe 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/\nDetail page\n\nThe 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/\u003cpostId\u003e\n\nThe 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/\u003cuserId\u003e\n\n\nProject setup:\n\nnpm install\n\nnpm start\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnassimtaghipour%2Fblog-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnassimtaghipour%2Fblog-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnassimtaghipour%2Fblog-reactjs/lists"}