Technologies Used
- HTML, CSS, JS
- React
- Vite
- Framer Motion
- React Router
This Photosnap project is a multi-page, fully responsive website built with React Router and Vite. The goal was to create a single-page website with multiple dynamic routes while maintaining smooth navigation and animations.
What I Learned I am most proud of how I used React Router to implement routing logic for a single-page application with multiple pages, making the app feel more dynamic and user-friendly.
React Router: I gained a better understanding of how React Router helps in creating multi-page websites within a single-page app.
Responsive Design: My ability to create responsive websites has grown significantly, as evidenced by the adaptive layouts in this project. I focused on ensuring the website looks great on various devices.
Dynamic Pages: I also implemented dynamic pages for each story, making the site more engaging and complex.
Challenges Faced Making the Website Feel Alive:
I tackled this by implementing Framer Motion to create smooth and beautiful animations for React components. The challenge was ensuring that animations didn’t feel jarring, especially when navigating between routes. Responsiveness:
Creating components that adapt well across devices was a bit tricky, but I was able to achieve it through a lot of testing and refining. Future Improvements For the next project, I plan to incorporate React-Redux for global state management and Tailwind CSS for easier styling and utility classes. While I am familiar with both technologies, I haven't fully utilized them yet, and this will be my next challenge.