Inspiration The inspiration for the Genshin Impact UGC Website came from our deep appreciation for the game's vast, beautiful world and its incredibly creative community. We noticed that while players were creating amazing fan art, guides, team compositions, and lore analyses, this content was scattered across different platforms. We wanted to build a dedicated, centralized hub where every Traveler could share, discover, and celebrate their creations and insights, fostering a stronger, more collaborative community.
What it does The Genshin Impact UGC Website is a dedicated platform for user-generated content. It allows fans to:
Create & Share: Upload and publish original content such as character guides, build tutorials, fan fiction, original artwork, music covers, and region exploration tips.
Organize & Discover: Content is categorized by tags (e.g., character name, element, region, content type) and features a powerful search function. Users can browse trending, latest, or most-liked submissions.
Interact & Collaborate: Users can like, comment on, and bookmark their favorite posts. A user profile system showcases an individual's contributions and favorites.
Utility Tools: Integrated community tools like an interactive map marker (for sharing puzzle solutions or resource locations) and a team composition builder that users can share and discuss.
How we built it We built the website using a modern, full-stack approach:
Frontend: We used React with TypeScript for a robust and type-safe user interface, ensuring a smooth and interactive experience. Tailwind CSS helped us create a visually appealing design that reflects the aesthetic of Teyvat.
Backend: The server is built with Node.js and the Express framework to handle API requests, user authentication, and content management.
Database: We chose MongoDB for its flexibility in storing diverse types of user content and user profiles.
Authentication: Implemented using JWT (JSON Web Tokens) for secure user login and session management.
Storage: User-uploaded images and files are stored and delivered via Cloudinary.
Version Control & Deployment: We used Git for collaboration and deployed the application on Vercel (frontend) and Render (backend).
Challenges we ran into Structuring Diverse Content: Designing a database schema and UI that could elegantly accommodate vastly different content types (text guides, image galleries, video links) was a significant challenge.
Performance with Media: Ensuring fast loading times for image-heavy pages required implementing lazy loading, image optimization pipelines, and efficient CDN usage.
Real-time Features: Implementing real-time notifications for likes and comments initially posed a challenge, which we solved by integrating a lightweight WebSocket connection.
Balancing Inspiration & Copyright: We had to carefully design the site to encourage original creativity while implementing clear guidelines to respect miHoYo's intellectual property.
Accomplishments that we're proud of Creating a Cohesive Community Space: We successfully built a single, functional platform that brings together different forms of fan creativity under one roof.
Intuitive User Experience: Achieving a clean, intuitive interface that is easy for users to navigate, regardless of whether they are creators or browsers.
A Fully Featured Core: Launching with a complete set of core features—user profiles, content creation, interactive commenting, and a robust tagging/search system—from day one.
Positive Initial Feedback: Receiving enthusiastic responses from early testers within the Genshin Impact community who found the site genuinely useful and engaging.
What we learned The Importance of Flexible Design: Planning for scalability and diverse data types from the start is crucial for a UGC platform.
Community is Key: Engaging with our target audience during development provided invaluable insights that shaped the site's features.
Handling Assets at Scale: We gained practical experience in managing and optimizing user-uploaded media efficiently.
Balancing Vision with Scope: Prioritizing a minimum viable product (MVP) with core features was essential for launch, allowing us to build and iterate based on real user feedback.
What's next for Genshin Impact UGC Website Advanced Features: Implementing a voting/ranking system for "Community Builds of the Week," and adding a co-authoring feature for collaborative guide writing.
Enhanced Interactivity: Introducing user-created polls, quizzes, and a more advanced interactive map where users can submit and verify markers.
Monetization Support (for Creators): Exploring ethical ways to allow creators to receive support, such as integrated "Ko-fi" or "Patreon" links, and potentially a premium, ad-free experience for supporters.
Mobile Application: Developing a dedicated mobile app to provide a better experience for users on the go.
Community Events: Hosting official site-sponsored contests and events with in-game prizes (via Welkin Moons or merchandise) in collaboration with the community.
API Development: Creating a public API to allow developers to build complementary tools and applications, further expanding the ecosystem around the platform.
Log in or sign up for Devpost to join the conversation.