-
-
cung nhau - our logo! The red box outside the yellow words represents LNY red envelopes, protecting the words "together."
-
The home page! We tried to make the style minimalistic, while more accessible than websites we referenced.
-
The about page clarifies the AAPI acronym and explains how we focus strongly on AAPI folks in North Carolina.
-
The direct action page links some notable national petitions and some NC community events (two which are virtual).
-
Since we are NCSU students, we wanted to include a list of NCSU AAPI orgs. The general page has statewide orgs.
Basic information
Team: Lorem ipsum
Discord usernames: cvrios#9529, minute#4740, csri#0457, nlraj#3570
Email for project leader: mldinh2@ncsu.edu
Inspiration
With the rise in anti-AAPI (Asian American and Pacific Islander) violence affecting the United States during COVID-19, we wanted to build a website to provide a general overview for people who want to support AAPI communities. We found inspiration from other resource websites, such as pb-resources.com and anti-asianviolenceresources.carrd.co. We liked that both of them offered a comprehensive list of resources and direct action, but felt like the websites were visually inaccessible and lacked a strong focus on location.
We wanted to combine aspects we liked about both websites while incorporating some elements of our own. We decided to do the following:
- Having a North Carolina and NCSU focus
- Using images as large links to certain concepts
- Having large text for accessibility
- Providing visual information on the AAPI population in NC based on census data
- Incorporating Google Translate into the HTML for a larger, AAPI audience
What it does
Upon entering the website, the user can look around to learn about general, NC-specific information on the following:
- historical readings
- mental health resources
- direct action (with an NC focus)
- NC-specific AAPI organizations (within NCSU and statewide)
- individuals/organizations that need donations or mutual aid (nationally and in NC)
W also incorporated Google Translate, so the text can be easily translated for those who want to access the material in a different language. We also dedicated a section to a map that covers the AAPI population per NC county, from the page.
How we built it
First, Minh-Thu and Namrata designed the logo and website mock-ups on Adobe Illustrator. Then, Namrata focused on implementing the census AAPI data using Python and various data analytics and visualization programs. Cynthia and Chitra analyzed the mock-ups and began coding them in HTML, CSS, and Javascript.
Challenges we ran into
- This was Minh-Thu's first time using Adobe Illustrator, so there was a learning curve with understanding all of the commands and tools.
- Cynthia's biggest challenge was matching the designs with coding, while integrating Bootstrap for different monitor sizes.
- This was Chitra's first time using Bootstrap! She had to get used to the terminology for the CSS framework and combine that with her previous knowledge in HTML and CSS.
- Namrata ran into several challenges finding relevant public datasets to use, as well as cleaning the datasets (often thousands of entries long) and converting them into geographic data sets.
Accomplishments that we're proud of
We are so proud of a lot of the features we were able to implement onto our website - especially, the map of North Carolina AAPI organizations that was created using python and data analytics. We are also proud of the contact us form that we were able to create using HTML and CSS. Generally speaking, we have pride in creating a website with an accessible user interface. Finally, we hope that our website can help educate and inform the general public about how they could help support the AAPI community.
What we learned
We learned how to use data analytics and visualization techniques to create a map of AAPI organizations in the North Carolina area. We also learned how to use Bootstrap in conjunction with HTML and CSS - using Bootstrap ensured that our website would not lose its shape on different devices! We also learned how to use Adobe Illustrator to create clear and comprehensive mockups of how we wanted our website to work; this really helped us in the long run because we knew exactly how we wanted our website to look from the beginning.
What's next for cùng nhau
We weren't able to complete every webpage due to time limitations, so we would first finish the pages covering mental health resources, and donations/mutual aid. We also would want to fix some CSS styling errors, especially with the translation bar.
One of our team members previously interned for NCAAT, a non-profit organization in NC that focuses on AAPI communities. If the website is more fleshed out, we are considering asking for support to spread the word about our website.
Built With
- adobe-illustrator
- css3
- folium
- geopandas
- html5
- matplotlib
- pandas
- python







Log in or sign up for Devpost to join the conversation.