Fully tested e2e with Cypress!
Welcome to my Valorant app!
🎮 Dive into the World of Valorant Like Never Before! 🎮
Are you a Valorant enthusiast looking for an immersive way to explore your favorite agents? Look no further! My app brings the vibrant universe of Valorant right to your fingertips. Whether you're strategizing for your next match and trying to build a team with your fellow friends or a fan of Valorant--my app will be useful for you!
You can easily navigate through the agents with my intuitive filtering system. You can select on the agents based on their roles, such as: Duelists, Controllers, Initiators, or Sentinels. You can discover and explore their unique abilities and learn about their details! You can also learn more about their abilities and while you are at it, hover over the different abilities and go for a spin!
Now that you have learned so much about your agent, you can build a team of up to 5! You can easily add your agents to a team, helping you visualize the perfect lineup for your play style. Go ahead and mix and match agents based on their abilities and roles-crafting a team that aligns with your strategy and preferences!
I hope you enjoy the visuals with high-quality images and interactive elements that bring the agents to life. Have fun exploring my app and most of all, have fun playing VALORANT!
-Github page: https://github.com/Nicolelam8891/valorantshowcase
If you would like to run the app from your machine, follow these instructions:
Fork this repository.
Clone it to your local machine using the command: git@github.com:Nicolelam8891/valorantshowcase.
- Run the command:
cd valorantshowcase - Run the command:
npm install - Run the command:
npm start - Once the modules have finished compiling, enter
http://localhost:3000/into your browser to see the live web page.
🎮Deployed Link: https://valorantshowcase.vercel.app/
Nicole Lam
This is the final solo project of Mod 3 at Turing School of Software & Design. We were given 5 days to create this project from scratch after I agreed on an MVP with my project manager. I probably spent around 40-50 hours on this project over the week. This project is my third attempt at making a react app and my first attempt utilizing Figma independently. I learned a lot this round and now understand how powerful of a tool Figma is when designing an app. I used technologies such as react-router, cypress e2e testing, responsive design, prototypes and animation.
Gain competency with React fundamentals | Test React components & asynchronous JS | Practice refactoring | Create a multi-page UX using Router | End-to-end testing with Cypress | User stories and acceptance criteria, and personas | Worked within time constraints (5 days) to deliver a project for a niche audience, helping them solve a problem unique to them | Responsive design across mobile, tablets and different desktop sizes
Filter functionality | logic | Cypress | I used dev tools to do responsive design for the iphone 12 dimension. It looked perfect; however, when I used my app on my iphone 12 phone with a safari and chrome browser, it didn't look the same as it does on dev tools. Reached out to a mentor for clarification on this and how to fix this in the future.
Responsive design | Utilizing Figma to create the app design | Adding players to team and delete functionality | Animation