Genshin Impact Guide
Genshin Impact Game Guide Website
Web Development Project
Role: UX/UI Designer , Developer
Collaborator: Chuqiao Zhong , Xuanming Liu
Duration: 1 month (June 20th 2023 - July 25th 2023)
Tools Used:​
-
Figma (Prototyping)​​
-
HTML/CSS/JavaScript/PHP/Mysql (Development)
-
Git (Group work Git Tool)
Project Code Link: Github Link
Project Video: Youtube Link
Project Description
We developed a comprehensive Genshin Impact guide website with an extensive database of characters, weapons, and artifacts. The platform features a full account login system, allowing users to register, upload guides, bookmark, and upvote content, fostering an interactive community. Built using PHP, HTML, CSS, and JavaScript, it serves as a valuable resource for fans.
Initial Stages
Our project stemmed from a shared love of gaming and a particular fascination with Genshin Impact, a highly popular game. We decided to create a comprehensive guide website, leveraging our interests and technical skills to provide valuable insights and resources for the gaming community.
Wireframing
During the wireframing stage, we first discussed the necessary database schemas for the website. We then collaboratively created an ER diagram, understanding that clearly defining our goals and functionalities was crucial before starting front-end and back-end development. We ensured that each function and its related database components were clearly documented to prevent issues during development. This thorough planning helped us align our objectives and streamline the development process.
ER Diagram
Post-Wireframing Stage
After completing the wireframing stage, we transitioned to the coding phase, where team members used Git for version control and updates. Each person was responsible for different parts of the project. During this phase, I finalized the complete data structure in phpMyAdmin, ensuring seamless data integration. To maintain data accuracy, I documented each primary key and foreign key in the development files, making it easy for team members to access and refer to as needed.
Testing and Debugging Phase
Following the coding phase, we transitioned to testing and debugging. We established a detailed testing environment to mimic real-world scenarios and detect potential issues. For instance, we identified a critical bug where character pages failed to display correct data due to errors in data transmission from the database. Fixing this issue ensured accurate data presentation and significantly enhanced the website's stability and reliability. After completing our initial tests, we invited several classmates to test the site. Their feedback and experiences helped us make further optimizations, ensuring a smooth and user-friendly experience.
Key Features of the Genshin Impact Game Guide Website
Dynamic Front-End Design:
Utilizes HTML, CSS, and JavaScript for a responsive and interactive user interface.
The character guides section presents exhaustive details on each character’s skills, equipment, and strategies for gameplay. Users can view character profiles that include images, descriptions, and interactive elements to engage with the content.
Real-Time Data Updates:
Uses Ajax to update page content instantly without refreshing, enhancing user experience. When users filter categories, results are displayed immediately without needing to refresh the page.
Categorized Browsing:
Allows users to browse and filter characters, weapons, and artifacts by various attributes. For example, users can filter characters by level and rarity, weapons by type (e.g., bows, swords, axes), and artifacts by compatibility with characters. Additionally, in the guide section, users can sort guides by publication date, popularity, or bookmarks. By learning and implementing AJAX in our code, we ensured that users can see the filtered results immediately without needing to refresh the webpage.
JavaScript and Ajax are utilized to enhance the interactivity of the guides. For instance, the characterGuides.php file includes script references that use of Ajax for sorting and dynamically loading content, such as user-submitted guides, without reloading the webpage.
User Account Registration and Encrypted Password Security:
Provides secure account creation with encrypted password protection. We recognize the importance of password security, so after users set their passwords, we implemented automatic encryption using password_hash. This method enhances the security of user information and helps prevent unauthorized access.
The register.php script handles new user registrations. It performs server-sidevalidation and inserts new user data into the users database table after hashingthe password for security.
User Comments, Guides, and Engagement:
Enables users to comment on and write guides for characters and weapons. Users can like and bookmark guides, fostering content engagement and personal curation. This allows users to contribute their own strategies and insights while also supporting and diversifying the guide content by engaging with others' contributions through comments, likes, and bookmarks.
Content Filtering Options:
Allows sorting of guides by criteria such as recent posts or most liked.
Personalized Dashboard:
Displays user activity, including posted guides, liked content, and bookmarks, as well as records of other guides that have been bookmarked. This feature allows users to easily manage their interactions and keep track of the content they find valuable.
Commenting and Favoriting Guides:
Authenticated users can comment on character guides. They can also mark guides asfavorites, which are then stored in their profile for easy access.
​
Posting New Guides:
Users can contribute to the community by creating and submitting new guides for different characters. This feature fosters user engagement and content generation.
Development Challenges and Solutions
1. Design and Database Structure
​
Challenge:
I encountered significant difficulties in designing a coherent Entity-Relationship (ER) diagram due to the need to foresee the website's functionalities and its future scalability. Determining data relationships was complex and required detailed planning and analysis.
​
Solution:
To resolve this, I thoroughly analyzed our requirements and iterated on the ER diagram. I also gathered feedback from Genshin Impact players, which helped refine the design to better meet user needs. This iterative process allowed us to create a functional and scalable database structure, ready for both current and future use.
​
2. Implementing Ajax for the First Time
​
Challenge:
Implementing Ajax was a daunting task for me as it was my first time handling full-stack development. The goal was to enhance user experience by enabling asynchronous data transmission for content filtering without refreshing the page, which led to various technical hurdles.
​
Solution:
I tackled this by immersing myself in learning and debugging Ajax. By persistently resolving issues with data handling and server-client response discrepancies, I gradually improved my Ajax skills, leading to a smoother and more responsive user experience without page reloads.
​
3. Collaboration and Version Control
​
Challenge:
Managing collaboration and version control was challenging. Working with team members on different parts of the project led to difficulties in merging and pulling changes on GitHub, which posed risks of file loss and merge conflicts.
​
Solution:
I addressed this by establishing a clear version control strategy and conducting regular team meetings to synchronize our work. I implemented guidelines for committing changes and resolving conflicts, which enhanced coordination and minimized the risk of file loss, ensuring seamless integration of team contributions.
Takeaways
Over the course of one month, my team and I designed and developed a comprehensive website for Genshin Impact players. We faced and overcame various challenges, including technical issues and user experience design. By continuously collaborating, we not only improved our coding skills but also prioritized creating a user-friendly experience. One key lesson from this project was the importance of user testing. By regularly inviting users to test the site, we gathered valuable feedback and made necessary improvements. This project taught me that creating a great product requires a balance of technical skills, user-focused design, and openness to feedback.