-
-
mobile web app home page
-
mobile landmark descriptions
Inspiration
We recently visited a historical civil rights museum in Atlanta, and we wanted more people to know about all these locations in Atlanta so that they can learn more about the city's history. We were also inspired by maps like the one we made for other cities, but we wanted to make a map solely focused on Atlanta.
What it does
We built a webpage that displays a google map of eight historical civil rights landmarks in Atlanta. Underneath the map, we displayed a list of all these landmarks with each location’s title, picture, description, and a link to their website.
How we built it
We used a full stack framework called Next.js which is built on top of React and Node.js. We loaded the Next.js boilerplate code into VSCode and installed Tailwind CSS with the project, so we could easily edit CSS inline. Then, we created header and footer components for our website with react and used those in the homepage. Next, we researched historical civil rights landmarks in Atlanta and put those on a google map. Then, we embedded the map into the home page of our website. Lastly, we built a React component to display information for each of the landmarks and put that under the map in the home page.
Challenges we ran into
- This project was one team member’s first time using React and Next.js, so she spent some time dealing with errors in VSCode that come about when it’s your first time running one of these projects. But, she was eventually able to get these problems resolved and contribute to the project.
- Figuring out how to manipulate the CSS in order to make the webpage display things like we wanted was also a challenge because no one on our team was very skilled with CSS. We used Tailwind CSS which made the code slightly more beginner friendly because we were able to alter the styles inline within the HTML.
- Lastly, deploying to Azure was a bit difficult because this was our first time deploying a web app to Azure, but we were eventually able to figure out how to get it built and deployed. We’re still working out the CI/CD pipeline to make it automatically re-deploy whenever we push changes to the GitHub Repo.
Accomplishments that we're proud of
- We were able to embed the map into the website with the eight historical locations, so users can easily look at where the sites are located.
- We made the website responsive so that the website looks nice on different screen sizes such as phones, tablets, and desktops. We did this by writing our CSS, so it sizes and lays out the content of the pages differently for different screen sizes.
- We successfully deployed the web app using Azure despite this being our first time using Azure.
- We successfully collaborated on the project so both team member’s ideas were able to be incorporated into it.
- The UX/UI for our web app is very clean and functional. The website content also doesn’t take too long to load.
What we learned
- How to use Figma to prototype an app design.
- How to utilize React, Next.js, and Tailwind CSS to create a functional and responsive web app.
- How to embed a map with multiple locations into a website using Google Maps.
- How to collaborate on project code at the same time using the Live Share Extension in VSCode.
- How to successfully deploy the web app using Azure.
What's next for ATL Civil Rights Landmarks
We would like to expand on this website more by adding more historical landmarks and information on all these landmarks. Since we only had a few locations, we kept the map and descriptions to one page, but ideally, we’d like to have a map that links the user to a separate page with information on each of the landmarks. We’d also like to curate more information on each of these places, so that it can go on the webpages. Another nice addition would be a timeline that goes through when all these landmarks were formed, so users get a better idea of Atlanta’s history.
Log in or sign up for Devpost to join the conversation.