{"id":18255912,"url":"https://github.com/nothingnothings/postmanager","last_synced_at":"2026-04-07T09:31:35.130Z","repository":{"id":59332013,"uuid":"536233175","full_name":"nothingnothings/PostManager","owner":"nothingnothings","description":"A single-page ReactJS frontend app, connected to a backend comprised of Node (Express.js) and MongoDB (storage solution; storage of User and Post objects in a NoSQL database).","archived":false,"fork":false,"pushed_at":"2024-10-04T17:07:18.000Z","size":1176,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-11T17:08:10.440Z","etag":null,"topics":["authentication","bootstrap","fetch-api","font-awesome","frontend","json-data","mobile-app","mongodb","mongodb-atlas","nodejs","pagination","reactjs","responsive-design","restapi","single-page-app"],"latest_commit_sha":null,"homepage":"https://nothingnothings.github.io/PostManager/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nothingnothings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-13T17:17:56.000Z","updated_at":"2024-10-04T17:06:30.000Z","dependencies_parsed_at":"2024-11-05T10:35:11.089Z","dependency_job_id":null,"html_url":"https://github.com/nothingnothings/PostManager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nothingnothings/PostManager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FPostManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FPostManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FPostManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FPostManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothingnothings","download_url":"https://codeload.github.com/nothingnothings/PostManager/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FPostManager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31507963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["authentication","bootstrap","fetch-api","font-awesome","frontend","json-data","mobile-app","mongodb","mongodb-atlas","nodejs","pagination","reactjs","responsive-design","restapi","single-page-app"],"created_at":"2024-11-05T10:19:03.895Z","updated_at":"2026-04-07T09:31:35.107Z","avatar_url":"https://github.com/nothingnothings.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![PostManager1](/snapshot/PostManager2.png)\n\u003chr\u003e\n\n![PostManager2](/snapshot/PostManager1.png)\n\n# PostManager\n\nSimple ReactJS app with authentication and post creation logic, connected to a Node.js (Express.js) backend, helped by a MongoDB database and hosted on the Railway platform. The webApp can be acessed [here](https://nothingnothings.github.io/PostManager). \n\nThe app was bootstrapped with create-react-app and deployed with GitHub Pages, assisted by the GitHub Actions feature.\n\nThe REST API backend portion of the app can be found [here](https://github.com/nothingnothings/PostManager-Backend).\n\n![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/nothingnothings/PostManager/master?style=flat-square)\n[![en](https://img.shields.io/badge/lang-en-red.svg?style=flat-square)](https://github.com/nothingnothings/PostManager)\n[![pt-br](https://img.shields.io/badge/lang-pt--br-green.svg?style=flat-square)](https://github.com/nothingnothings/PostManager/blob/master/README.pt-br.md)\n\n\n\n\n## Technologies\n\nSome of the Languages, Libraries and packages employed:\n\n- Node Package Manager (for bootstrapping and managing the React app)\n- HTML5 (JSX)\n- CSS3 (animations, Flexbox, media queries)\n- ReactJS (JavaScript Library, app built entirely of React components; usage of \"state\" to manage form validation, etc.)\n- Form validation logic (state-based input validation, logic for adding and removing \"touched\" and \"invalid\" styles, etc.)\n- Responsive mobile design (sidebar, Flexbox, media queries)\n- Bootstrap (mainly the Footer component)\n- Font Awesome (Footer component's icons)\n- MongoDB (noSQL database storage solution; storage of `user` and `post` objects into collections in a remote MongoDB Atlas database)\n- Fetch API usage (for the JSON communication, requests and responses, between the frontend app and the Node.js/express.js backend targeted by it)\n- For the sending of the data of the posts to the backend, `FormData()` and `FileReader()`; JavaScript APIs/Objects used to send multipart HTTP requests (strings/text and images) to the Node.js backend, where the JSON data is separated from the image data (files chosen by the user), before being handled appropriately\n\n## Project Directory Structure\n\nThe development environment (with the use of the `create-react-app` tool/workflow):, as seen in the `master` branch:\n\n```\n.\\\n│\n├── public\\\n│   ├── 404.html\n│   ├── logo192.png\n│   ├── logo512.png\n│   ├── apple-touch-icon.png\n│   ├── favicon-16x16.png\n│   ├── favicon-32x32.png\n│   ├── favicon.ico\n│   ├── index.html\n│   └── manifest.json\n│\n├── src\\\n│   │\n│   ├── components\\\n│   │   │\n│   │   ├── Backdrop\\\n│   │   │   ├── Backdrop.css\n│   │   │   └── Backdrop.js\n│   │   │\n│   │   ├── Button\\\n│   │   │   ├── Button.css\n│   │   │   └── Button.js\n│   │   │\n│   │   ├── ErrorHandler\\\n│   │   │   └── ErrorHandler.js\n│   │   │\n│   │   ├── Feed\\\n│   │   │   │\n│   │   │   └── Post\\\n│   │   │       ├── Post.css\n│   │   │       └── Post.js\n│   │   │\n│   │   │\n│   │   ├── Footer\\\n│   │   │   ├── Footer.css\n│   │   │   └── Footer.js\n│   │   │\n│   │   ├── Form\\\n│   │   │   │\n│   │   │   └── Input\\\n│   │   │       ├── FilePicker.js\n│   │   │       ├── Input.css\n│   │   │       └── Input.js\n│   │   │\n│   │   │\n│   │   ├── Image\\\n│   │   │   ├── Avatar.css\n│   │   │   ├── Avatar.js\n│   │   │   ├── Image.css\n│   │   │   └── Image.js\n│   │   │\n│   │   ├── Layout\\\n│   │   │   ├── Layout.css\n│   │   │   └── Layout.js\n│   │   │\n│   │   ├── Loader\\\n│   │   │   ├── Loader.css\n│   │   │   └── Loader.js\n│   │   │\n│   │   ├── Logo\\\n│   │   │   ├── Logo.css\n│   │   │   └── Logo.js\n│   │   │\n│   │   ├── Modal\\\n│   │   │   ├── Modal.css\n│   │   │   └── Modal.js\n│   │   │\n│   │   ├── Navigation\\\n│   │   │   │\n│   │   │   ├── MainNavigation\\\n│   │   │   │   ├── MainNavigation.css\n│   │   │   │   └── MainNavigation.js\n│   │   │   │\n│   │   │   ├── MobileNavigation\\\n│   │   │   │   ├── MobileNavigation.css\n│   │   │   │   └── MobileNavigation.js\n│   │   │   │\n│   │   │   ├── MobileToggle\\\n│   │   │   │   ├── MobileToggle.css\n│   │   │   │   └── MobileToggle.js\n│   │   │   │\n│   │   │   └── NavigationItems\\\n│   │   │       ├── NavigationItems.css\n│   │   │       └── NavigationItems.js\n│   │   │\n│   │   │\n│   │   ├── Paginator\\\n│   │   │   ├── Paginator.css\n│   │   │   └── Paginator.js\n│   │   │\n│   │   ├── SinglePostPaginator\\\n│   │   │   ├── SinglePostPaginator.css\n│   │   │   └── SinglePostPaginator.js\n│   │   │\n│   │   └── Toolbar\\\n│   │       ├── Toolbar.css\n│   │       └── Toolbar.js\n│   │\n│   │\n│   ├── pages\\\n│   │   │\n│   │   ├── Auth\\\n│   │   │   ├── Auth.css\n│   │   │   ├── Auth.js\n│   │   │   ├── Login.css\n│   │   │   └── Login.js\n│   │   │\n│   │   └── Feed\\\n│   │       │\n│   │       ├── FeedEdit\\\n│   │       │   ├── FeedEdit.css\n│   │       │   └── FeedEdit.js\n│   │       │\n│   │       ├── SinglePost\\\n│   │       │   ├── SinglePost.css\n│   │       │   └── SinglePost.js\n│   │       │\n│   │       ├── Feed.css\n│   │       └── Feed.js\n│   │\n│   │\n│   ├── util\\\n│   │   ├── image.js\n│   │   └── validators.js\n│   │\n│   ├── App.css\n│   ├── App.js\n│   ├── index.css\n│   └── index.js\n│\n├── .gitignore\n├── package-lock.json\n└── package.json\n```\n\nThe create-react-app workflow's production output, as shown in the `gh-pages` branch (tasked with the deployment of the app):\n\n```\n.\\\n│\n├── static\\\n│   │\n│   ├── css\\\n│   │   ├── 1.b0103ddb.chunk.css\n│   │   ├── 1.b0103ddb.chunk.css.map\n│   │   ├── main.176757f9.chunk.css\n│   │   └── main.176757f9.chunk.css.map\n│   │\n│   └── js\\\n│       ├── 1.ab771bf3.chunk.js\n│       ├── 1.ab771bf3.chunk.js.map\n│       ├── main.8ad88ea1.chunk.js\n│       ├── main.8ad88ea1.chunk.js.map\n│       ├── runtime~main.720003f3.js\n│       └── runtime~main.720003f3.js.map\n│\n│\n├── .nojekyll\n├── 404.html\n├── logo192.png\n├── logo512.png\n├── apple-touch-icon.png\n├── asset-manifest.json\n├── favicon-16x16.png\n├── favicon-32x32.png\n├── favicon.ico\n├── index.html\n├── manifest.json\n├── precache-manifest.b9da06879698db9688cbb05c98f3fb50.js\n└── service-worker.js\n```\n\n## Webpack and package.json Configuration Files\n\nThe package.json file used in the project:\n\n```\n{\n  \"name\": \"post-manager\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"homepage\": \"https://nothingnothings.github.io/PostManager\",\n  \"dependencies\": {\n    \"@fortawesome/free-regular-svg-icons\": \"^6.1.1\",\n    \"@fortawesome/free-solid-svg-icons\": \"^6.1.1\",\n    \"@fortawesome/react-fontawesome\": \"^0.2.0\",\n    \"@types/react-fontawesome\": \"^1.6.5\",\n    \"bootstrap\": \"^5.1.3\",\n    \"react\": \"^16.5.2\",\n    \"react-bootstrap\": \"^2.4.0\",\n    \"react-dom\": \"^16.5.2\",\n    \"react-router-dom\": \"^4.3.1\",\n    \"react-scripts\": \"2.0.4\",\n    \"react-transition-group\": \"^4.4.2\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": \"react-app\"\n  },\n  \"browserslist\": [\n    \"\u003e0.2%\",\n    \"not dead\",\n    \"not ie \u003c= 11\",\n    \"not op_mini all\"\n  ],\n  \"devDependencies\": {\n    \"gh-pages\": \"^4.0.0\"\n  }\n}\n\n\n```\n\n## Setup\n\nTo use this project, clone it using Git:\n\n1. Run `git clone` to clone the project into your local Git repository\n2. Run `npm install` to install all dependencies (`react`, `axios`, etc)\n3. Run `npm run build` to create the production/deployment version of the app (outputted in `/build`)\n4. Serve the production files locally or on the web, with the help of a hosting provider (although great part of the app relies/depends on the backend's data, which in the case of this demo, is served by a Node.js (Express.js) server, hosted on Railway)\n5. For the purposes of this demo, on the Home page, input the credentials `exemplo@exemplo.com` (email) and `exemplo` (password) to access the apps's functionalities (Post Viewing and Creation)\n\n## Features\n\n- Single-Page Application, no page reloads, single HTML file (ReactJS)\n- Application divided into many components, of which some are used more than a single time, on different pages (ReactJS design philosophy)\n- Form validation logic, in the landing page, powered by ReactJS's state management\n- Responsive design (adaptive, mobile and desktop support) created with Flexbox and media queries\n- Usage of GitHub Actions and GitHub Pages with the create-react-app utility for a seamless workflow (transition from development stage to production/deployment stage). Upon the git push command, GitHub Actions transfers the contents of the master branch into the gh-pages branch, which then deploys the app at https://nothingnothings.github.io/PostManager\n- Addition/removal of CSS classes (\"fadeEnter\" animation) implemented with `react-transition-group`\n- For deployment demonstration purposes, only a single user is enabled/created on the serverside, with the credentials exemplo@exemplo.com (email field) and exemplo (password field). Furthermore, the \"Posts\" made by the user are reset every 1 Hour (MongoDB \"Scheduled Trigger\" feature)\n- Custom favicon, compatible with multiple devices\n- Simple pagination logic for the list of posts (\"Next\" and \"Previous\" buttons)\n- Usage of the `fetch()` API for communication with the Node.js (Express.js) backend, which manages the \"User\" and \"Post\" objects, stored on a MongoDB database (MongoDB Atlas service); the Node.js server and MongoDB database also handle the authentication logic (login) implemented on the app\n\n## Inspiration\n\nInspired by the \"NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)\" and \"React - The Complete Guide (incl Hooks, React Router, Redux)\" courses by Maximilian Schwarzmüller.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fpostmanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothingnothings%2Fpostmanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fpostmanager/lists"}