Inspiration

The theme of the Hackathon, combined with the nostalgia that we felt for the old websites helped us to come up with the idea of making an app that would create an old looking website for the user.

What it does

Depending on the input from the user, it creates a website that mimics websites from the 90s/early 2000s. User has freedom in the customization of the website in terms of headings, text, and images. The themes of the website are randomly generated. If the user does not like a particular theme, a simple refresh would help.

How we built it

We primarily used React to develop the form site and the generated site. We started by using Material UI for the form frontend and we found it really useful to create beautiful and usable user interfaces. Also, to create a cool transition from a modern website to an older era website, we used the WarpSpeed library. Then onwards to the design of generated site, we found a lot of inspiration from visiting the popular sites as they looked in the 90s.

Challenges we ran into

We ran into a major challenge of integrating the WarpSpeed library transition into our website. We learnt the usage of useEffect hook for it and then it worked well.

Accomplishments that we're proud of

This project was an amazing experience for us and we were able to do almost everything we had planned at the beginning of the Hackathon. Since it was our first time using React, we are extremely proud of how it turned out to be. We learnt topics like Routing and Local Storage and used them to create a better experience for the user. Despite the website still being relatively simple, we're quite happy with what we ended up with.

What we learned

  1. React for frontend
  2. Routing in React for transitions between pages
  3. React Hooks
  4. WarpSpeedJS for the transition animation
  5. Material UI for styling

What's next for Time Capsules from the 90s

In the future, we might decide to add a user authentication system and a database so that users can save their generated websites. Perhaps even a feature allowing them to share their generated websites with other people. We could even allow the users to build their own themes. The possibilities, as they say, are endless.

Built With

Share this project:

Updates