Inspiration
The inspiration for "Remembering Tulsa" came from a startling realization during our AP U.S. History class - one of the most significant events in American history, the 1921 Tulsa Race Massacre, was barely mentioned in our textbooks. This erasure of history sparked our determination to create a comprehensive, accessible digital platform that would preserve and share this crucial story.
The prosperous Greenwood District, known as "Black Wall Street," represented Black excellence and entrepreneurship in the face of systemic racism. Its destruction wasn't just a tragedy - it was a pivotal moment that deserved to be remembered and understood. We wanted to create more than just another website; we aimed to build an educational experience that would honor the victims and survivors while connecting historical events to contemporary discussions about racial justice.
What it does
We developed an interactive historical website that:
Presents a detailed chronological narrative of the events Features a responsive, accessible design that works across all devices Includes carefully curated historical photographs and documents Provides comprehensive source citations for academic integrity Offers an immersive user experience through smooth animations and thoughtful typography
How we built it
The project was built using modern web technologies:
React with TypeScript for robust, type-safe development Tailwind CSS for responsive, maintainable styling Lucide React for consistent iconography Intersection Observer API for smooth scroll animations CSS Grid and Flexbox for responsive layouts We prioritized performance and accessibility:
Optimized images with appropriate sizing and compression Implemented semantic HTML structure Ensured proper color contrast for readability Added ARIA labels for screen readers Created a mobile-first, responsive design
Challenges we ran into
Historical Accuracy: Verifying historical details was challenging due to decades of intentional obscurity. We overcame this by cross-referencing multiple academic sources and the Oklahoma Commission's official report.
Sensitive Content: Presenting traumatic historical events respectfully while maintaining historical accuracy required careful consideration. We focused on factual storytelling while being mindful of our language and image selection.
Technical Challenges: Implementing smooth animations and ensuring consistent performance across devices required multiple iterations. We solved this by using the Intersection Observer API and optimizing our JavaScript code.
Responsive Design: Creating a layout that worked seamlessly across all screen sizes while maintaining the visual hierarchy was complex. We addressed this through extensive testing and refinement of our CSS Grid and Flexbox implementations.
What we learned
This project taught us valuable lessons about:
The importance of thorough historical research Web accessibility best practices Performance optimization techniques Collaborative development workflows The power of digital storytelling in education
What's next for Remembering Tulsa
This project will continue to evolve as a vital educational resource, ensuring the story of Tulsa's Greenwood District and its destruction remains accessible to future generations.
Log in or sign up for Devpost to join the conversation.