{"id":26397275,"url":"https://github.com/timalexanderandersson/read-and-review-webpage","last_synced_at":"2025-09-04T00:16:22.720Z","repository":{"id":263797975,"uuid":"891409764","full_name":"Timalexanderandersson/read-and-review-webpage","owner":"Timalexanderandersson","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-29T09:12:57.000Z","size":3055,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T09:38:25.715Z","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/Timalexanderandersson.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-20T09:33:20.000Z","updated_at":"2025-01-29T09:13:00.000Z","dependencies_parsed_at":"2024-12-07T14:22:11.901Z","dependency_job_id":"eda1247a-bf2a-4ec3-a542-78ef8dfa85bf","html_url":"https://github.com/Timalexanderandersson/read-and-review-webpage","commit_stats":null,"previous_names":["timalexanderandersson/read-and-review-webpage"],"tags_count":0,"template":false,"template_full_name":"Code-Institute-Org/gitpod-full-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fread-and-review-webpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fread-and-review-webpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fread-and-review-webpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timalexanderandersson%2Fread-and-review-webpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timalexanderandersson","download_url":"https://codeload.github.com/Timalexanderandersson/read-and-review-webpage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244031150,"owners_count":20386534,"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":[],"created_at":"2025-03-17T12:17:14.850Z","updated_at":"2025-03-17T12:17:16.436Z","avatar_url":"https://github.com/Timalexanderandersson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Read \u0026 Review\n\nThis is Read \u0026 review it is a fullstack project. The website is for people who enjoy reading and who love to share and to get the thougths of recently read books. Or to just discover books that you have not read yet. you can post reviews on the website , and connect with others on the site!\nIts made with React and Django REST, and bootstrap.\n[Read \u0026 Review here!](https://read-and-review-bdeebdc26c44.herokuapp.com/)\n![alt text](src/assets/minbilf.PNG)\n\n## Read \u0026 Review - - Table Content\n\n- [Planning the project](#Planning)\n- [Wireframes](#wireframes)\n- [Agile methodology](#Agile-methodology)\n- [Website Features](#Features)\n- [To be features](#to-be-features)\n- [backend](#django-rest)\n- [Installed Libraries](#installed-libraries)\n- [Technical Stack](#technical-stack)\n- [Testing](#testing)\n- [Validation](#validation)\n- [Testing in React](#testing-in-react)\n- [Bugs](#bugs)\n- [Deployment](#deployment)\n- [Credits](#credits)\n- [Acknowledgements](#acknowledgements)\n\n# Planning\n\n### User stories om github\n\n\u003cdetails\u003e\n\u003csummary\u003eUser story stack\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/userstoryyyyys.PNG\"\u003e\n\u003c/details\u003e\n\n- Here is all the user storys made for this project. from the django rest back end to React front end planning.\n\n[User story github](https://github.com/users/Timalexanderandersson/projects/11)\n\n## Wireframes\n\nHere is all the wireframe created for desktop and mobil format.\nexcept for profiles. which is not included in this project yet.\nand the rating system, since i did not have the time before deadline.\n\n## Mobile\n\nHere is the wirefram for mobile.\n\n- here user can see new posts on the page and intro for the webpage.\n\u003cdetails\u003e\n\u003csummary\u003eFront page.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobil-frontpage.PNG\"\u003e\n\u003c/details\u003e\n\n- sign in for user with password and username.\n\u003cdetails\u003e\n\u003csummary\u003eSign in.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobile-sign-in.PNG\"\u003e\n\u003c/details\u003e\n\n- Registration for user with input for password and username.\n\u003cdetails\u003e\n\u003csummary\u003eRegistration.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobile-register-account.PNG\"\u003e\n\u003c/details\u003e\n\n- inside post/sign in, user can comment on post, and delete, comment.\n- made with component in react.\n\u003cdetails\u003e\n\u003csummary\u003eInside post sign in.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobile-post-signin-edit.PNG\"\u003e\n\u003c/details\u003e\n\n- visitor can not comment on the post.\n\u003cdetails\u003e\n\u003csummary\u003eInside post logged out.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobile-post-not-signin.PNG\"\u003e\n\u003c/details\u003e\n\n- here the visitor/user can find new uploaded posts.\n\u003cdetails\u003e\n\u003csummary\u003eexplore-page.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobile-explore-page.PNG\"\u003e\n\u003c/details\u003e\n\n- user can edit the post.\n\u003cdetails\u003e\n\u003csummary\u003eEdit post.\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobil-edit-post.PNG\"\u003e\n\u003c/details\u003e\n\n- user can post a review on to the website.\n\u003cdetails\u003e\n\u003csummary\u003eAdd post\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobil-add-review-post.PNG\"\u003e\n\u003c/details\u003e\n\n- Dropdown for user to find links in navigation field.\n\u003cdetails\u003e\n\u003csummary\u003edropdown\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/dropdown-mobile-links.PNG\"\u003e\n\u003c/details\u003e\n\n## Desktop\n\n- here user can see new posts on the page and intro for the webpage.\n\u003cdetails\u003e\n\u003csummary\u003efront page\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop_frontpage.PNG\"\u003e\n\u003c/details\u003e\n\n- here the visitor/user can find new uploaded posts.\n\u003cdetails\u003e\n\u003csummary\u003eexplore-new\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-explorepage.PNG\"\u003e\n\u003c/details\u003e\n\n- user can post a review on to the website.\n\u003cdetails\u003e\n\u003csummary\u003eAdd post\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-add-review-site.PNG\"\u003e\n\u003c/details\u003e\n\n- user can edit the post.\n\u003cdetails\u003e\n\u003csummary\u003eEdit post\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-edit-post.PNG\"\u003e\n\u003c/details\u003e\n\n- sign in for user with password and username.\n\u003cdetails\u003e\n\u003csummary\u003eSign in\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-signin.PNG\"\u003e\n\u003c/details\u003e\n\n- Registration for user with input for password and username.\n\u003cdetails\u003e\n\u003csummary\u003eRegistration\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-signin.PNG\"\u003e\n\u003c/details\u003e\n\n- inside post/sign in, user can comment on post, and delete, comment.\n- made with component in react.\n\u003cdetails\u003e\n\u003csummary\u003eInside post\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-post-signin.PNG\"\u003e\n\u003c/details\u003e\n\n- visitor can not comment on the post.\n\u003cdetails\u003e\n\u003csummary\u003epost not sign in \u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktop-inside-post.PNG\"\u003e\n\u003c/details\u003e\n\n# Agile methodology\n\nWas using Agile methodology while working on the project Read \u0026 Review. which worked good, following the user storys and checking them of one by one. making sure they was living up to acceptance criteria.\n\n#### the 3 steps in the user story.\n\n#### To Do\n\nWhen the user story is created.\n\n#### In Progress\n\nWhen the user story is in progress to get done.\n\n#### Done\n\nWhen the user story is done.\n\n### Diagram for models\n\n\u003cdetails\u003e\n\u003csummary\u003eDiagram models comment \u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/Comments-model.PNG\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDiagram models post \u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/models-post.PNG\"\u003e\n\u003c/details\u003e\n\n- lucid.app to create the diagrams\n\n# Features\n\n### navbar\n\n- in the navbar if logged in(explore-page, add-review, signout, homepage )\n- if sign out (sign in, explore-page, register, and homepage. )\n\u003cdetails\u003e\n\u003csummary\u003enavbar desktop\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/navbardesktop.PNG\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003emobile navbar\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobilnavbar.PNG\"\u003e\n\u003c/details\u003e\n\n### Footer\n\n- In the footer you have links and a text for following our pages on social media. (instagram, youtube, facebook)\n\u003cdetails\u003e\n\u003csummary\u003efooter mobil/desktop\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/foooooter.PNG\"\u003e\n\u003c/details\u003e\n\n### Contact page\n\n- This page contains a form if visitor/user want to contact the owner of the page.\n- Need to fill in the name, email, and alternativ in a dropdown, and then a description about it.\n\n\u003cdetails\u003e\n\u003csummary\u003eContact desktop\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/froncontactpage.PNG\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMobile Contact\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/mobilecontact.PNG\"\u003e\n\u003c/details\u003e\n\n\n### frontpage\n\n- Frontpage include a list of 4 of the new add reviews posts. and short intro for the webpage.\n\u003cdetails\u003e\n\u003csummary\u003eFrontpage desktop\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/frontpageeee.PNG\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003emobile frontpage\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktopp.PNG\"\u003e\n\u003c/details\u003e\n\n### add-review and edit.\n\n- add-review includes (title, description, and image-upload, and button for creating the post)\n- edit include the samethings and contains the information since created.\n\u003cdetails\u003e\n\u003csummary\u003eadd review desktop/mobil\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/creating.PNG\"\u003e\n\u003c/details\u003e\n\n### posts page and comment.\n\n- post shows all the information the user put out. and give users a comment section for commenting.\n\u003cdetails\u003e\n\u003csummary\u003epost desktop/mobil sign in\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/postcomment.PNG\"\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003epost desktop/mobil sign out\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/notsignin.PNG\"\u003e\n\u003c/details\u003e\n\n### explore page.\n\n- contains all the new post with short description on all.\n\u003cdetails\u003e\n\u003csummary\u003eexplore desktop/mobil \u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/exploreeee.PNG\"\u003e\n\u003c/details\u003e\n\n### Register.\n\n- Register for user so they can get access to the website.\n\u003cdetails\u003e\n\u003csummary\u003e desktop/mobil \u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/register.PNG\"\u003e\n\u003c/details\u003e\n\n### Sign in.\n\n- sign in for user who already have an account.\n\u003cdetails\u003e\n\u003csummary\u003e desktop/mobil \u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/signin.PNG\"\u003e\n\u003c/details\u003e\n\n# To be features\n\n- planning on making a profile page with an bio for information.\n- and rating system with stars.\n- and be able to comment on others comments.\n\n# Django Rest backend\n\n[Django rest API](https://github.com/Timalexanderandersson/Read-review-Django-API)\n\n[heroku live](https://read-review-django-api-b8922a0fef0a.herokuapp.com/)\n\n# Installed Libraries\n\n**@testing-library/jest-dom: 6.6.3**\n\n**@testing-library/react: 16.2.0**\n\n**@testing-library/user-event: 13.5.0**\n\n**axios: 1.7.7**\n\n**bootstrap\": 5.3.3**\n\n**jwt-decode\": 3.1.2**\n\n**react: 18.3.1**\n\n**react-bootstrap: 2.10.5**\n\n**react-dom: 18.3.1**\n\n**react-router-dom: 6.28.0**\n\n**react-scripts: 5.0.1**\n\n**typescript: 4.9.5**\n\n**util: 0.12.5**\n\n**web-vitals: 2.1.4**\n\n ## devDependencies (Testing)\n  \n**@testing-library/dom: 10.4.0**\n\n  **@types/react\": 19.0.1**\n\n  **@types/react-dom: 19.0.1**\n\n  **jest: 29.7.0**\n\n  **msw: 2.6.8**\n\n  **nsw : 0.1.0**\n\n **added to the list for testing**\n  \"jest\": {\n    \"transformIgnorePatterns\": \n      \"/node_modules/(?!axios)/\"}\n\n\n# Technical Stack\n\n- React: framework for frontend.\n- CSS: style the site.\n- Bootstrap.js: style the website.\n- Gitpod: development\n- Git: version control\n- Heroku: for deploying front-end.\n\n# Testing\n\n### Lighthouse\n\n#### Desktop Lighthouse testing\n\n\u003cdetails\u003e\n\u003csummary\u003eDesktop results\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktoplighthouse.PNG\"\u003e\n\u003c/details\u003e\n\n#### Mobile Lighthouse\n\n\u003cdetails\u003e\n\u003csummary\u003eMobile results\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/desktoplighthouse.PNG\"\u003e\n\u003c/details\u003e\n\n## Validation\n\n- W3C validator shows.\n  ![alt text](src/assets/nohtmllll.PNG)\n\n- W3C jigsaw.\n  ![alt text](src/assets/csss.PNG)\n\n- JSHint on all pages.\n  ![alt text](src/assets/deletecomment.PNG)\n\n- CI python Linter\n- tested in all serializers and views.\n  ![alt text](src/assets/dawdawdawd.PNG)\n\n## Testing in React.\n\n| Status  | **Delete post - Post deleted getting 204 status in Editpostpage.test.js**                            |\n| :-----: | :----------------------------------------------------- |\n| \u0026check; | Deleted post (status code 204). |\n\n| Status  | **Registration status - When registrated getting 201 status in Signup.test.js**                           |\n| :-----: | :------------------------------------------------------------- |\n| \u0026check; | Registration submit getting (status 201).|\n\n| Status  | **Navbar - When User not Sign in. NavBar.test.js**                           |\n| :-----: | :------------------------------------------------------------- |\n| \u0026check; | User not sign in(Home, Explore now, Sign in, Register, Contact).\n\n| Status  | **Navbar - When Sign in. NavBar.test.js**                           |\n| :-----: | :------------------------------------------------------------- |\n| \u0026check; | User Sign in (Home, Explore now, Sign out, Add review, Contact).\n\n\n| Status  | **Create post - button is there in the add review Editpostpage.test.js**                                     |\n| :-----: | :----------------------------------------------------------- |\n| \u0026check; | The \"Create post\" button on Editpostpage.test.js |\n\n## Bugs\n\n#### No bugs found inside the project.\n\n### unsolved bugs\n\n#### None.\n\n## Deployment\n\n### Create project repository github\n\nLog in to **GitHub** then navigate to **Code institute template** for making the project. \n\n[Code institute template ](https://github.com/Code-Institute-Org/ci-full-template).\n\n![starttemplet](src/assets/githubtemp.PNG)\n\nClick on the **\"Use this template\"** on rigth side of the page, and then press the **\"Create a new repository\"**\n\n![repository](\u003csrc/assets/skapa ny.PNG\u003e)\n\nCreating a descriptive project name in the **\"Repository name\"** field. In the Public/Private section choose Public.\nThen click **\"Create Repository\"**.\n\n![allneeded](\u003csrc/assets/allt desista.PNG\u003e)\n\n### Create heroku app\n\nLogin to the **heroku platform**.\n\nNavigate to the dropdown bar to the right of the website(New) on the homepage, choose to **\"Create new app\"**\n\n\u003cdetails\u003e\n\u003csummary\u003e \u003cstrong\u003eNew\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/skapanyappheroku.PNG\"\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e \u003cstrong\u003eCreate app\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/härskapar.PNG\"\u003e\n\u003c/details\u003e\n\n\nGive the app a project name, and choose the location you are in(Eu/US).\n\u003cdetails\u003e\n\u003csummary\u003e \u003cstrong\u003eUs/Eu\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/skapadennyyy.PNG\"\u003e\n\u003c/details\u003e\n\nThen press **\"Create app\"**\n\n### deploy heroku application\n\nNavigate to **\"Deploy\"** section between the **\"Resources\"** and **\"Metrics\"**.\n\n\u003cdetails\u003e\n\u003csummary\u003e \u003cstrong\u003eNavigate to Deploy and adding github repository\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/deployeengit.PNG\"\u003e\n\u003c/details\u003e\n\nGo to **Deployment method** and choose the **Github** and connect to your Repository project.\n\n\nGo down to **\"Manual deploy\"** section and press the **\"Deploy Branch\"**.\n\n\u003cdetails\u003e\n\u003csummary\u003e \u003cstrong\u003eDeploy Branch\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\u003cimg src=\"src/assets/längstnerepåsidan.PNG\"\u003e\n\u003c/details\u003e\n\n\n## Problem with deploy\nProblem deploy on heroku from\ngetting errors. because of the @babel libraries.\ndeleted all of the (@babel) and npm installed again.\n\n\n## Credits\n\n### Help from websites.\n\n- cloudinary.com for uploading pictures.\n- https://www.pexels.com/ for pictures.\n- https://www.geeksforgeeks.org\n- how-to-setup-404-page-in-react-routing/ 404 page.\n- https://stackoverflow.com/questions/3715047/\n- how-to-reload-a-page-using-javascript\n- code institute project for Django REST framework.\n- and moments project from code institute for help with my React.\n- https://www.w3schools.com/\n- https://favicon.io/favicon-converter/ för favicon\n- google font Crimson Text\n- https://stackoverflow.com/questions/43692479/how-to-upload-an-image-in-react-js\n- [cooler](https://coolors.co/) website for colors on the website.\n  https://www.youtube.com/watch?v=IYCa1F-OWmk\n- balsamiq for making wireframe.\n- lucid.app for making my models.\n- https://www.kindacode.com/article/react-removing-items-from-a-list#google_vignette\n- https://developer.mozilla.org/en-US/docs/Web/API/File/name finding file Name\n- https://github.com/testing-library/jest-dom/issues/202\n- https://archive.jestjs.io/docs/en/22.x/mock-function-api#mockfnmockresolvedvaluevalue\n- https://testing-library.com/docs/react-testing-library/intro/\n- https://altcademy.com/blog/how-to-write-data-in-json-file-using-reactjs/\n- https://www.freecodecamp.org/news/how-to-persist-a-logged-in-user-in-react/\n\n\n## Acknowledgements\n\n- and thanks my mentor Spence for help with guidance with my project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimalexanderandersson%2Fread-and-review-webpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimalexanderandersson%2Fread-and-review-webpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimalexanderandersson%2Fread-and-review-webpage/lists"}