{"id":22559792,"url":"https://github.com/taurusilver7/inbound-media-ui","last_synced_at":"2025-10-18T18:21:23.997Z","repository":{"id":53121998,"uuid":"521034200","full_name":"taurusilver7/inbound-media-UI","owner":"taurusilver7","description":"A client-side UI of a social-media MERN application.","archived":false,"fork":false,"pushed_at":"2022-08-07T05:31:21.000Z","size":712,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T12:12:20.793Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/taurusilver7.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":"2022-08-03T21:15:45.000Z","updated_at":"2022-08-03T21:16:26.000Z","dependencies_parsed_at":"2022-09-09T10:23:26.781Z","dependency_job_id":null,"html_url":"https://github.com/taurusilver7/inbound-media-UI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taurusilver7/inbound-media-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Finbound-media-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Finbound-media-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Finbound-media-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Finbound-media-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/inbound-media-UI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Finbound-media-UI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278522635,"owners_count":26000879,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-12-07T21:09:16.772Z","updated_at":"2025-10-05T21:23:07.344Z","avatar_url":"https://github.com/taurusilver7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inbound-Media\n\n\u003e The client-side development of a MERN stack social media application. The marvel of social, gossip \u0026 advertisement.\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n```bash\nyarn create react-app@latest \u003capp_name\u003e\n# and\ncd \u003capp_name\u003e\n# and\nyarn start\n```\n\n## Build\n\nStart the development server on localhost:3000.\n\nRefactor the starter template to suit the application requirements. Remove the test files \u0026 unnecessary logos from public directory.\n\nTo set the default background on th application, create two blur elements \u0026 position them from absolute attribute. Set the font-family to default in root file to `Inter`\n\n### Home\n\nCreate home page with Home component \u0026 corresponding styles file. The home component had profile, post % a right suggestions sections.\n\nThe home components has a relative grid size of: 18rem (profile), auto (max-post), and suggestions (20rem)\n\n- Profile\n\nCreate a profile component, which has a search input element, a user profile card, and a user-followers card component. Create each for continuous integration.\n\nCreate a search component with a logo \u0026 an input element. Style the input search icon with a gradient to match the logo, for ambience.\n\nCreate a profile card component to hold the cover+user profile, user details \u0026 follower details.\n\nCreate a followers component with a mock data from /Data. Add a follower img, name, username \u0026 a custom follow button.\n\nCreate a global button for the application with default attributes.\n\n- Results\n\nCreate a results component to occupy the center grid of the home page.\nThe posts section has an upload top component, and posts compoenent.\n\nThe upload component has a text input field, and a set of buttons. A hidden file input element linked to a useRef() hook calls the click event on the image-upload button.\n\nAdd a imageRef ref value to the file input. Fire a callback fn on change of the input. Search for the file existence in the ref, and add the image to the state after uploading the file to browser \u0026 converting it into an url for upload.\n\nAttach the ref to the onClick event on the image-upload button. `onClick={() =\u003e imageRef.current.click()}`, to fire the onChange event on the file-input element.\n\nCreate another div to display the image on condition of its existance (if image === true). Add a close button to empty the state.\n\nCreata a mockData for posts \u0026 populate them in the posts component. Populate each post in a induvidual Post component.\n\nEach Post component has a post image, post buttons, and user info.\n\n- Suggestions\n\nThe right corner component to carry the optional buttons, and suggestion users \u0026 trends.\n\nCreate a trends component to display mock-data on Trends, and populate them in a section.\n\n### Profile\n\nThe profile page has 3 grids. The left grid has search, user-info \u0026 followings data.\n\nThe center grid has the user profile, and uploaded posts. The right grip has trend suggestions, with option buttons.\n\nAdd the search, infoCard, and followers components on the left side. Add the Card (userCard), and Results components on the middle grid.\n\nCondition the `My-profile` button in the Card component to appear only on left stack. Add suggestions to the right end.\n\nCreate a modal to let the users edit their personal details on the application \u0026 modify in the database.\n\nUse library [mantine](https://mantine.dev/guides/cra/) for creating a modal. Use a template to create the modal \u0026 mount it on the application.\n\nAdd modal for user detail modification, and post uploading in suggestions component.\n\n### Auth\n\nCreate an auth page for login \u0026 signup accounts to the application. Add the application logo \u0026 title to the layout.\n\nCondition the additional input fields with a state value \u0026 create handleChange callback function to load the state with the input values. Create a reset function to reset the value ot initial state on form switching.\n\n### Redux\n\nImport [redux](https://redux.js.org/), [react-redux](https://react-redux.js.org/) to set up global store for state-management.\n\nImport [redux-thunk](https://www.npmjs.com/package/redux-thunk) middleware to return functions, rather than just actions, within redux.\n\nTo send requests to the API on the server side \u0026 handle responses, import axios \u0026 create /api to handle the auth related requests in `auth.js`. Add the server url `http://localhost:5000/api/v1` to the package.json as _proxy_\n\nCreate a auth based reducer action_types, state_updates, and actions in /actions \u0026 /reducers to request \u0026 parse the auth information from server. Store the auth information on successful authentication on local storage undert the tag: \"profile\"\n\nNavigate between the pages based on the login \u0026 register state in the authReducer.authData. Based on authData, navigate between Auth \u0026 Home pages.\n\nThe MongoDB database prevents the user from uploading images into its database for security issues. Either user another storage service like AWS, firebase, or directly store the images in server local storage \u0026 retrueve them when called upon.\n\nCreate an api endpoint, an upload action \u0026 dispatch it in the upload component. Create a upload route \u0026 handler function to store the image in local storage in the server.\n\nCreate an endpoint \u0026 a dispatch actions for post. Create a postReducer to add all the action types \u0026 their corresponding state changes.\n\nModify the UI corresponding to the reducer states, and for better flexibility. Disable the post button in upload component prior to no content in the input field.\n\nuse the reducer in the Posts, Post, Upload \u0026 Card components to retreive information from the server to make the components dynamic.\n\nAdd two default images to cover \u0026 profile \u0026 the user can update them using the update user endpoint. Navigate to the Profile page from the Card component.\n\nA new props `location` is added to the Card component to differntiate its position in the Home \u0026 Profile pages. Condition the component to display certain elements in only certain page.\n\nFilter through post to match their userId's and get the number of posts uploaded by a certain user.\n\nUpdate the InfoCard component in the Profile page with their user dynamic information.\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `yarn build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Finbound-media-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Finbound-media-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Finbound-media-ui/lists"}