Skip to content
/ ci-pp5-buzz-of-berlin Public

Buzz of Berlin is a Berlin specific social media platform where Berliners can share their Berlin photos, favourite places in Berlin and favourite or personal events in Berlin.

ci-pp5-buzz-of-berlin.herokuapp.com/
0 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

vkleer/ci-pp5-buzz-of-berlin

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

217 Commits
.github/ISSUE_TEMPLATE
.github/ISSUE_TEMPLATE
 
 
docs
docs
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
Procfile
Procfile
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

Buzz of Berlin

(Developer: Vilayat Kleer)

mockup-image.jpg

View the live front end application

View the live back end API

View the back end repository

Table of Contents

  1. Project Goals
    1. About
    2. User Goals
    3. Application Owner Goals
  2. User Experience
    1. Target Audience
    2. User Requirements and Expectations
  3. User Stories
    1. Navigation
    2. Authentication
    3. Posts
    4. Recommendations
    5. Events
    6. Comments
    7. Profiles
  4. Design
    1. Colours
    2. Fonts
    3. Wireframes
  5. Technologies Used
    1. Languages
    2. Tools
    3. Libraries
    4. Front end
    5. Back end
  6. Features
  7. Validation
    1. CSS Validation
    2. JSX Validation
    3. Accessibility Wave WebAIM
    4. Performance Google Lighthouse
  8. Testing
    1. Manual Testing - User Stories
    2. Automated Testing - NavBar Component
    3. Testing on DIfferent Devices
  9. Bugs
  10. Deployment
    1. GitHub
    2. Heroku
  11. Credits
    1. Images
    2. Code
  12. Acknowledgements

Project Goals

About

Buzz of Berlin is a Berlin specific social media platform where Berliners can share their Berlin photos, favourite places in Berlin and favourite or personal events in Berlin. Every registered and logged in user can like other users' Posts and Recommendations, or leave a comment on them to share their thoughts and opinions. Users can also follow each other to stay up to date on their latest Posts. Posts, Recommendations and Events all contain a district field, making it easy to find your new favourite places and events to go to in Berlin.

User Goals

  • Be able to share photos, favourite places and events with other Berliners
  • Be able to interact with other Berliners on a Berlin specific social media platform
  • Get inspired by other Berliners' photos and favourite places
  • Find new events to go to in Berlin

Application Owner Goals

  • Create a Berlin speficic social media platform that helps bring Berliners together
  • Provide users with the ability to share their Berlin photos with Posts, favourite places in Berlin with Recommendations and favourite or personal events in Berlin with Events
  • Deliver an aesthetically pleasing design that makes users want to come back

User Experience

Target Audience

  • People who live in Berlin
  • Berliners who want to find new places to go to
  • Berliners who want to find new events to attend
  • Berliners who want to share their Berlin photos

User Requirements and Expectations

  • Fast application that is easy to use
  • Responsive, aesthetic design that is responsive across all devices
  • Providing a personal touch by displaying the users' profile image in the navigation bar

User Stories

Navigation

  1. As a user I can see the navigation bar on every page so that I can easily navigate to different parts of the application
  2. As a user I can use the navigation bar so that I can navigate to different parts of the application
  3. As a user I can see my posts/recommendations/events being loaded automatically so that I can keep scrolling instead of clicking any buttons

Authentication

  1. As a user I can create an account so that I can start use all the features of the application
  2. As a registered user I can log in so that I can start using the application
  3. As a user I can log out of the application so that I can end my session if I choose to and keep my account secure
  4. As a user I will stay logged into the application so that I can keep using the application until I decide to log out

Posts

  1. As a user I can create posts so that I can share photos I made in Berlin with other users
  2. As a user I can edit my posts so that I can change the content if necessary
  3. As a user I can delete my posts so that I can remove them if I want to
  4. As a user I can like a post so that I can show other users that I like their content
  5. As a user I can view all the posts that I liked so that I can revisit them
  6. As a user I can search posts so that I can quickly find posts
  7. As a user I can view a posts' individual page so that I can read the comments left on the post
  8. As a user I can browse posts of other users that I follow so that I can engage with them
  9. As a user I can view posts of all of the applications' users so that I can find new users to follow

Recommendations

  1. As a user I can create recommendations so that I can share the best places in Berlin with other users
  2. As a user I can edit my recommendations so that I can change the content if necessary
  3. As a user I can delete my recommendations so that I can remove them if I want to
  4. As a user I can like a recommendation so that I can show other users that I like their content
  5. As a user I can view all the recommendations that I liked so that I can revisit them
  6. As a user I can search recommendations so that I can quickly find recommendations
  7. As a user I can view a recommendations' individual page so that I can read the comments left on the recommendation
  8. As a user I can browse recommendations so that I can engage with them

Events

  1. As a user I can create events so that I can inform other users about event in Berlin
  2. As a user I can edit my events so that I can change the content if necessary
  3. As a user I can delete my events so that I can remove them if I want to
  4. As a user I can search events so that I can quickly find events
  5. As a user I can view a events' individual page so that I can view it in detail
  6. As a user I can browse events so that I can find events in Berlin

Comments

  1. As a user I can create a comment so that I can engage with other users
  2. As a user I can edit my comments so that I can update them if necessary
  3. As a user I can delete my comments so that I can remove them from the post or recommendation if I want to
  4. As a user I can see the date of any comment so that I can know whether a comment is new or old
  5. As a user I can read other users' comments so that I can engage better with other users

Profiles

  1. As a user I can view a profile page so that I can find more content from that user
  2. As a user I can edit my profile so that I can update my details
  3. As a user I can change my username and password so that I can keep my account safe
  4. As a user I can see who the most active and popular users are so that I can follow them for good content

Design

Colours

The colours I used for the application are based around the logo that I created early on in Adobe Illustrator. The main colours of the application are a dark grey (#414141), gold/yellow (#F0CF36) and white (#FFFFFF), with slight variations of those colours being used for accents or active/hover states. The gold/yellow colour is the main colour I picked from the logo to base the rest of the applications' colours. The dark grey and white create a nice contrast between all the components and keep everything easy to read, while the gold/yellow colour keeps the design interesting but not too busy.

Screenshot of main colours

Fonts

The fonts that I used are Rajdhani with a cursive fallback for the logo text and Jost with a sans-serif fallback for all other text elements.

Wireframes

Wireframes have been created to speed up the development and design process. The home page wireframe has been used as a reference for all the other pages and feeds (explore feed, recommendations feed, events feed, liked page) and the create page wireframe has been used as a reference for all the create/edit pages (create/edit posts, create/edit recommendations, create/edit events).

Home page
Create page

Technologies Used

Languages

Tools

Libraries

  • React 17.0.2 was used to build the user interfaces
  • React Bootstrap 4.6 was used for the application layout, styling and making each component responsive.
  • React Router was used as for dynamic routing. I used it to allow for navigation between views of different components and to control what users see when they enter a specific URL in the browser.
  • React Testing Library was used for automated testing
  • Axios was used as the promise based HTTP client for node.js and the browser. I used it specifically to send API requests to the back end and to avoid any CORS errors when sending cookies.
  • JWT was used to create JSON Web Tokens. They were needed to prevent anonymous users from making extra network requests to refresh their access token, to remove timestamps from the browser when the users' refresh token expires or when the user logs out.

Front end

React

React is a JavaScript library that is used for building interactive user interfaces. It uses declarative views to make your code easier to read and debug. The user interfaces consist of a collection of encapsulated and reusable components, allowing for complex user interfaces that are easy to manage thanks to separating the individual components.

React was used for several reasons:

  • Reusability
    • Each time you write a component it can be reused in other parts of your application, or even in a completely new/different application. This saves a lot of time.
  • Userbase and documentation
    • Since React is one of the most popular JavaScript libraries in the world, there is a plethora of of documentation and Stack Overflow questions for you to look at if you run into any errors.
  • Flexibility
    • Compared to other JavaScript libraries and front end frameworks, React code is easy to maintain and flexible thanks to its modular structure.
  • Performance
    • React is already fast out of the box, but can be easily optimized by using components like the react-infinite-scroll-component to avoid rerendering components over and over again when a user doesn't need them.
  • React Bootstrap
    • The first time I used Bootstrap was around 2013/2014 and I have been using it on and off ever since. Being able to use Bootstrap with React Bootstrap highly sped up the overall development process by being able to make the application responsive and aesthetic by applying its classes alongside my custom classes.

Components

The following components have been created and reused throughout the application:

  • <Asset />
    • A reusable component that renders differently depending on the props that are passed into it. Can render a spinner when content is still loading, an image with a src and alt attribute and/or a paragraph with a message.
  • <Avatar />
    • A reusable component that render user profile images. The props that it can take set the image source, image size, image dimensions (depending on where the component is rendered) and text (like the users' username).
  • <CreatePanel />
    • A reusable component that renders three NavLink components to allow users to create a Post, Recommendation or Event. Changes into a dropdown menu on small screens. When a user is logged out, it displays one NavLink component that links the user to the login page instead.
  • <DotsDropdown />
    • A reusable component that renders a dropdown menu on posts and comments, allowing users to edit or delete their posts or comments.
  • <ProfileEditDropdown />
    • A reusable component that renders a dropdown menu on use profile, allowing users to edit their profile information, username or password.
  • <NavBar />
    • A reusable component that renders a navigation bar, the content of which depends on whether the user is logged in or not.
    • Logged in users:
      • NavLink that links to the home page, displaying all posts of the users the logged in user follows
      • NavLink that links to the explore page, displaying all posts from all users
      • NavLink that links to the recommendations page, displaying all recommendations from all users
      • NavLink that links to the events page, displaying all events from all users
      • NavLink that links to the liked page, displaying only the posts and recommendations a user has liked
      • NavLink that links to the users' profile page, displaying the users' username, profile image, followers count, following count and all the users' created posts, recommendations and events
      • NavLink that links to the home page and signs out the user
    • Logged out users:
      • NavLink that links to the home page, displaying all posts from all users
      • NavLink that links to the events page, displaying all events from all users
      • NavLink that links to the log in page, allowing users to log in
      • NavLink that links to the sign up page, allowing users to create an account
  • <NotFound />
    • A reusable component that renders the [no-results](link here) image along with a message to inform the user the page doesn't exist.

Back end

Django REST Framework

The front end is being supplied with data from the Buzz of Berlin DRF API, which has been created using the Django REST Framework. The repository along with a README file can be found here.

Features

The application has a total of 26 features:

Logo and navigation bar

  • Custom logo was created for this project, placed on the left as is conventional
  • Contains the following links when logged in:
    • Home page (posts feed)
    • Explore feed
    • Recommendations feed
    • Events feed
    • Liked page (liked posts and recommendations)
    • Profile page
    • Sign out
  • Contains the following links when logged out:
    • Home page (explore feed)
    • Events feed
    • Log in page
    • Sign up page
  • Is present on every page
  • Is responsive and works on all screen sizes
  • Covers user story 1, 2 and 6
Screenshots of logo and navigation bar

Sign up form

  • Allows users to create an account
  • Users must provide a valid username and enter their preferred password twice for confirmation
  • Users cannot register the same username twice
  • Covers user story 4
Screenshot of sign up form

Login form

  • Allows registered users to login to their account
  • Both the username and password have to be correct to be logged in
  • Displays errors if the username or password is wrong or the input is invalid
  • Covers user story 5
Screenshot of login form

Post create form

  • Allows users to create their own posts
  • Contains image, title, district and caption fields (caption is optional)
  • The district field in particular allows users to find posts in their district easily using the search bar on other pages
  • Allows users to share their Berlin photos with other users
  • Covers user story 8
Screenshot of post create form

Post edit form

  • Allows users to edit their existing posts
  • Contains image, title, district and caption fields (caption is optional)
  • Covers user story 9
Screenshot of post edit form

Post page

  • Displays a single post
  • Contains all of the posts details, including its comments
  • Contains a like button to like and unlike the post
  • Contains a dropdown menu on the post to allow the owner to edit or delete the post
  • Covers user story 10, 11, 14, 34 and 35
Screenshot of post page

Posts feed

  • Contains all posts of users that the logged in user follows
  • Has a search bar to allow users to search by username, title or district
  • Covers user story 3, 13 and 15
Screenshot of posts feed

Explore feed

  • Contains all posts of all the users on the application
  • Has a search bar to allow users to search by username, title or district
  • Covers user story 3, 13 and 16
Screenshot of explore feed

Recommendation create form

  • Allows users to create their own recommendations
  • Contains image, title, location name, district, entry fee, price category and content fields
  • The location name and district fields in particular allows users to find recommendations more easily using the search bar on other pages
  • Allows users to share their favorite places in Berlin
  • Covers user story 17
Screenshot of recommendation create form

Recommendation edit form

  • Allows users to edit their existing posts
  • Contains image, title, location name, district, entry fee, price category and content fields
  • Covers user story 18
Screenshot of recommendation edit form

Recommendation page

  • Displays a single recommendation
  • Contains all of the recommendations' details, including its comments
  • Contains a like button to like and unlike the recommendation
  • Contains a dropdown menu on the recommendation to allow the owner to edit or delete the recommendation
  • Covers user story 19, 20, 23, 34 and 35
Screenshot of recommendation page

Recommendations feed

  • Contains all recommendations of all the users on the application
  • Has a search bar to allow users to search by username, title, location name, district or entry fee
  • Covers user story 3, 22 and 24
Screenshot of recommendations feed

Event create form

  • Allows users to create their own recommendations
  • Contains image, title, location name, district, entry fee, price category and content fields
  • The location name and district fields in particular allows users to find recommendations more easily using the search bar on other pages
  • Allows users to share their favorite places in Berlin
  • Covers user story 25
Screenshot of event create form

Event edit form

  • Allows users to edit their existing posts
  • Contains image, title, location name, district, entry fee, price category and content fields
  • Covers user story 26
Screenshot of event edit form

Event page

  • Displays a single event
  • Contains all of the events' details
  • Contains a dropdown menu on the event to allow the owner to edit or delete the event
  • Covers user story 27, 29, 34 and 35
Screenshot of event page

Events feed

  • Contains all recommendations of all the users on the application
  • Has a search bar to allow users to search by username, title, location name, district or entry fee
  • Covers user story 3, 28 and 30
Screenshots of events feed

Liked page

  • Contains all the posts and recommendations that the logged in user has liked
  • Updates accordingly when a post or recommendation has been unliked
  • Covers user story 12 and 21
Screenshots of liked page

Likes

  • Allows users to like posts and recommendations to show they like a users' content
  • Doesn't allow users to like their own content
  • When liked, the like button will turn solid yellow and when not liked will turn outlined dark grey
  • Covers user story 12 and 21
Screenshots of likes

Comments

  • Allows users to leave a comment on a post or recommendation
  • Comments can be edited or deleted
  • Displays the date the comment was posted or edited
  • All comments can be read by all other users, including logged out users
  • Covers user story 31, 32, 33, 34 and 35
Screenshot of comments

Popular profiles

  • Displays the most followed users on the application
  • Displays the users profile image and username
  • Contains a follow/unfollow button next to the username on large screens
  • Covers user story 39
Screenshot of popular profile

Profile page

  • Any user can view any users' profile, including logged out users
  • Contains a users profile image, username, followers count and following count
  • Contains all of the users' created posts, recommendations and events
  • Covers user story 36
Screenshots of profile page

Profile edit page

  • Allows users to edit their profile image
  • Allows users to edit their bio
  • Covers user story 37
Screenshot of profile edit page

Profile edit username page

  • Allows users to edit their username
  • Covers user story 38
Screenshot of profile edit username page

Profile edit password page

  • Allows users to edit their password
  • Covers user story 38
Screenshot of profile edit password page

Not found page

  • Displays the no-results image along with a message to inform the user the page doesn't exist
Screenshot of not found page

Infinite scroll

  • Allows users to scroll through their feeds without pressing any navigation buttons
  • Used in the posts, recommendations and events feeds, liked page, profile page and comments
  • No screenshot since it loads quickly, but can be seen when using the application
  • Covers user story 3

Validation

CSS Validation

All of the applications' module.css files have been validated using W3C's CSS Validation Service. They all passed with no errors or warnings. Since the validators' success message does not change depending on the CSS you feed it, I have included a single screenshot.

Screenshot of CSS validation

JSX Validation

The JSX code of the application has been validated using ESLint. It passed with no errors or warnings.

Screenshot of components ESLint validation
Screenshot of contexts ESLint validation
Screenshot of hooks ESLint validation
Screenshots of pages ESLint validation

Accessibility (Wave WebAIM)

The accessibility of the application has been measured using the Wave WebAIM web accessibility evaluation tool - all pages pass without errors.

Screenshot of home page accessibility evaluation
Screenshot of explore page accessibility evaluation
Screenshot of recommendations feed accessibility evaluation
Screenshot of events feed accessibility evaluation
Screenshot of liked page accessibility evaluation
Screenshot of profile page accessibility evaluation
Screenshot of create post page accessibility evaluation
Screenshot of create recommendation page accessibility evaluation
Screenshot of create event page accessibility evaluation

Performance (Google Lighthouse)

The performance of the application has been measured with Google Lighthouse with a near perfect score.

Screenshot of Lighthouse performance

Testing

Manual Testing - User Stories

  1. As a user I can see the navigation bar on every page so that I can easily navigate to different parts of the application
Action Expected Result Actual Result
Go to any page of the application The navigation bar is present on every page Works as expected
  1. As a user I can use the navigation bar so that I can navigate to different parts of the application
Action Expected Result Actual Result
Click on any of the navigation bars' links Redirects to the selected link Works as expected
  1. As a user I can see my posts/recommendations/events being loaded automatically so that I can keep scrolling instead of clicking any buttons
Action Expected Result Actual Result
Go to any page that loads posts, recommendations, events or comments Loads more content after the bottom has been reached Works as expected
  1. As a user I can create an account so that I can start use all the features of the application
Action Expected Result Actual Result
Go to the sign up page Be able to create an account Works as expected
  1. As a registered user I can log in so that I can start using the application
Action Expected Result Actual Result
Go to the login page Be able to log in Works as expected
  1. As a user I can log out of the application so that I can end my session if I choose to and keep my account secure
Action Expected Result Actual Result
Click on the 'Sign out' icon or link in the navigation bar Get signed out Works as expected
  1. As a user I will stay logged into the application so that I can keep using the application until I decide to log out
Action Expected Result Actual Result
Don't log out of the application Stay logged in Works as expected
  1. As a user I can create posts so that I can share photos I made in Berlin with other users
Action Expected Result Actual Result
Click on 'Create post' in the left hand panel Be able to create a post Works as expected
  1. As a user I can edit my posts so that I can change the content if necessary
Action Expected Result Actual Result
Click on the 'Edit' button from the dropdown menu on a post that you own Be able to edit your post Works as expected
  1. As a user I can delete my posts so that I can remove them if I want to
Action Expected Result Actual Result
Click on the 'Delete' button from the dropdown menu on a post that you own Be able to delete your post Works as expected
  1. As a user I can like a post so that I can show other users that I like their content
Action Expected Result Actual Result
Click on the like button on a post that is not your own Be able to like a post Works as expected
  1. As a user I can view all the posts that I liked so that I can revisit them
Action Expected Result Actual Result
Click on the heart icon or liked page link in the navigation bar Be able to view all the posts that I liked Works as expected
  1. As a user I can search posts so that I can quickly find posts
Action Expected Result Actual Result
Click on the search bar on the home page, explore feed or liked page and type in a post keyword Be able to filter down posts Works as expected
  1. As a user I can view a posts' individual page so that I can read the comments left on the post
Action Expected Result Actual Result
Click on any post Be taken to its post page Works as expected
  1. As a user I can browse posts of other users that I follow so that I can engage with them
Action Expected Result Actual Result
Click on the house icon or home page link in the navigation bar See all posts of the users that I follow Works as expected
  1. As a user I can view posts of all of the applications' users so that I can find new users to follow
Action Expected Result Actual Result
Click on the compass icon or explore feed link in the navigation bar See all posts of all users on the application Works as expected
  1. As a user I can create recommendations so that I can share the best places in Berlin with other users
Action Expected Result Actual Result
Click on 'Create recommendation' in the left hand panel Be able to create a recommendation Works as expected
  1. As a user I can edit my recommendations so that I can change the content if necessary
Action Expected Result Actual Result
Click on the 'Edit' button from the dropdown menu on a recommendation that you own Be able to edit your recommendation Works as expected
  1. As a user I can delete my recommendations so that I can remove them if I want to
Action Expected Result Actual Result
Click on the 'Delete' button from the dropdown menu on a post that you own Be able to delete your recommendation Works as expected
  1. As a user I can like a recommendation so that I can show other users that I like their content
Action Expected Result Actual Result
Click on the like button on a post that is not your own Be able to like a recommendation Works as expected
  1. As a user I can view all the recommendations that I liked so that I can revisit them
Action Expected Result Actual Result
Click on the heart icon or liked page link in the navigation bar Be able to view all the recommendations that I liked Works as expected
  1. As a user I can search recommendations so that I can quickly find recommendations
Action Expected Result Actual Result
Click on the search bar on the recommendations feed or liked page and type in a recommendation keyword Be able to filter down recommendations Works as expected
  1. As a user I can view a recommendations' individual page so that I can read the comments left on the recommendation
Action Expected Result Actual Result
Click on any recommendation Be taken to its recommendation page Works as expected
  1. As a user I can browse recommendations so that I can engage with them
Action Expected Result Actual Result
Click on the thumbs up icon or recommendations link in the navigation bar Be able to view all recommendations Works as expected
  1. As a user I can create events so that I can inform other users about event in Berlin
Action Expected Result Actual Result
Click on 'Create event' in the left hand panel Be able to create an event Works as expected
  1. As a user I can edit my events so that I can change the content if necessary
Action Expected Result Actual Result
Click on the 'Edit' button from the dropdown menu on an event that you own Be able to edit your event Works as expected
  1. As a user I can delete my events so that I can remove them if I want to
Action Expected Result Actual Result
Click on the 'Delete' button from the dropdown menu on an event that you own Be able to delete your event Works as expected
  1. As a user I can search events so that I can quickly find events
Action Expected Result Actual Result
Click on the search bar on the events feed and type in an event keyword Be able to filter down events Works as expected
  1. As a user I can view a events' individual page so that I can view it in detail
Action Expected Result Actual Result
Click on any event Be taken to its event page Works as expected
  1. As a user I can browse events so that I can find events in Berlin
Action Expected Result Actual Result
Click on the calendar icon or events link in the navigation bar Be able to view all events Works as expected
  1. As a user I can create a comment so that I can engage with other users
Action Expected Result Actual Result
Go to any post or recommendation page and write a comment in the 'Add a comment...' text input field Be able to create a comment Works as expected
  1. As a user I can edit my comments so that I can update them if necessary
Action Expected Result Actual Result
Click on the 'Edit' button from the dropdown menu on a comment that you own Be able to edit your comment Works as expected
  1. As a user I can delete my comments so that I can remove them from the post or recommendation if I want to
Action Expected Result Actual Result
Click on the 'Delete' button from the dropdown menu on a comment that you own Be able to delete your comment Works as expected
  1. As a user I can see the date of any comment so that I can know whether a comment is new or old
Action Expected Result Actual Result
Go to any post or recommendation page and look at the comment section Be able to see the date of every comment Works as expected
  1. As a user I can read other users' comments so that I can engage better with other users
Action Expected Result Actual Result
Go to any post or recommendation page and look at the comment section Be able to view every comment Works as expected
  1. As a user I can view a profile page so that I can find more content from that user
Action Expected Result Actual Result
Click on a users profile image anywhere on the application Be redirected to the users' profile Works as expected
  1. As a user I can edit my profile so that I can update my details
Action Expected Result Actual Result
Click on the profile image or profile link in the navigation bar, click on the 'Edit' button from the dropdown menu on your profile Be able to edit my profile image and bio Works as expected
  1. As a user I can change my username and password so that I can keep my account safe
Action Expected Result Actual Result
Click on the profile image or profile link in the navigation bar, click on the 'Change username' or 'Change password' button from the dropdown menu on your profile Be able to change your username or password Works as expected
  1. As a user I can see who the most active and popular users are so that I can follow them for good content
Action Expected Result Actual Result
Go to any non-create page and look at the 'The true Berliners' section Be able to see the mos followed users Works as expected

Automated Testing - NavBar component

Automated testing was carried out using the React Testing Library. The screenshot that I have adde below is from when I ran the tests that I wrote for the NavBar component, which runs without any errors.

Screenshot of automated NavBar component testing

Testing on Different Devices

The website has been tested on multiple physical devices without any issues:

  • Desktop PC
  • MacBook Pro 15"
  • Google Pixel 6 Pro
  • Samsung Galaxy S10
  • Samsung Galaxy Note 10+

In addition to the physical devices, the website has also been tested without any issues by toggling all the different device options in Google Chrome's Developer Tools under the Device Toggling section.

Bugs

Bug Fix
Users cannot log in Add a missing slash '/' to the end of the login URL - link to commit
Width of components change width on user input Set the margin of the parent component (Row) to 0 - link to commit
Create button showing up for anonymous users Set a condition so that the component will only be displayed when a user is logged in - link to commit
Avatar component does not render Add the export at the end of the file - link to commit
NavBar component not always at top of the page Add the fixed attribute set to top - link to commit
Already set image is not appended when editing an event Remove the form.append statement so only the conditional if (imageInput?.current?.files[0]) is being used - link to commit
useRedirect hook working in reverse - logged out users can access pages that logged in users can't Pass useRedirect hook the 'loggedOut' string instead of 'loggedIn' - link to commit
Mobile navigation bar doesn't format profile and sign out links properly - Create a media query for screen sizes below 768px and set the width for the parent container to auto - link to commit

Deployment

GitHub

This website was deployed using Github Pages with the following steps:

  1. Go to your Github Repository
  2. Navigate to the 'Settings' page
  3. On the left hand menu under 'Code and automationo', click on 'Pages'
  4. Under 'Source', click on the 'Branch' dropdown element and set it to your main branch (in my case, this branch is called 'main')
  5. Click on 'Save'
  6. Refresh the page and you will be provided with a link to your deployed Github Page.

If you want to fork this repository, follow these steps:

  1. Go to the Github repository (https://github.com/vkleer/ci-pp5-buzz-of-berlin)
  2. Click on the 'Fork' button in the top right corner under the navigation bar

If you want to clone this repository, follow these steps:

  1. Go to the Github repository (https://github.com/vkleer/ci-pp5-buzz-of-berlin)
  2. Click on the 'Code' button above the list of files
  3. Select your preferred way of cloning, I recommend using the 'GitHub CLI' option
  4. Under 'GitHub CLI', click on the copy button to copy the clone command
  5. In you IDE, open Git Bash
  6. Navigate to the working directory where you want to clone this directory
  7. Paste in the clone command you copied and press the 'enter' key to create the clone

Heroku

This React application has been deployed using Heroku with the following steps:

  1. Login to Heroku
  2. Go to your Heroku dashboard
  3. In the top-right corner, click on the 'New' button, followed by the 'Create a new app' button
  4. Enter an app name (it has to be unique) and choose your region under the 'Choose a region' dropdown menu.
  5. Click on the 'Create app' button
  6. In your projects package.json file, under scripts, add the following prebuild command: 
    "heroku-prebuild": "npm install -g serve",
  7. Create a Profile file at the root of your project and add the following web command to it: 
    web: serve -s build
  8. Make sure that the config vars in your back end app on Heroku are correct! The 'CLIENT_ORIGIN' should be set to the URL of the front end app Heroku app and the 'CLIENT_ORIGIN_DEV' should be set to the front end workspace URL.
  9. Click on the 'Deploy' tab
  10. Under 'Deployment method', click on 'Github'. You can then search for your repository under 'Search for a repository to connect to'
  11. Click on the 'Connect' button to connect your repository
  12. On the next page, under 'Choose a branch to deploy' you can choose the branch you want to deploy your app from
  13. Either click on the 'Enable Automatic Deploys' button under 'Automatic deploys' to have the app deploy automatically on each push you make to the branch, or click on the 'Deploy Branch' button under 'Manual deploy'
  14. Wait for the app to build and be deployed. Once the app is ready, a message will be displayed saying 'App was successfully deployed' along with a button which takes you to your newly deployed React app

Credits

The logo, no-results image and upload image were created by the developer.

Images

  • This application was created for education purposes only. All of the images used for profile images, posts, recommendations and events were sourced from Google to test out the application extensively. I am therefore unable to provide the sources of all the pictures found on Google.

Code

  • 'Buzz of Berlin' is the result of building on the 'Moments' walkthrough that was provided by Code Institute. Though it was used as a foundation, a lot of extra functionality has been added to make this project truly my own. Code Institute has been credited throughout my code where applicable using docstrings.
  • I kept receiving a type error that I could not get rid of, but I was able to solve it thanks to this post on Stack Overflow
  • While fetching data in one of my components, I kept receiving a memory leak indication. This post on Stack Overflow really helped me understand how to fix it

Acknowledgements

I would like to thank my partner Lauren Baker for helping me with the name of the application.

About

Buzz of Berlin is a Berlin specific social media platform where Berliners can share their Berlin photos, favourite places in Berlin and favourite or personal events in Berlin.

ci-pp5-buzz-of-berlin.herokuapp.com/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages