We need to have some platform where we can put all the team details and project details, so that's why we built our own pod website as part of our orientation hackathon. It also plays a role when we want to showcase the work that we do here at MLH. Also, it's a great start-up project for fellowship and a great opportunity to get hands-on experience with web technologies and team collaboration using Git and GitHub.

What it does

  • It is a react web app, having a snowy theme since we’re open-sourced olafs.
  • At the top, it has a navigation bar that links to the different sections of the website.
  • Then we have different cards for showing all our projects, which is flippable, the front card shows the thumbnail of the project, project name, GitHub repository link, deployed URL, and the tags for the tech stacks that were used, and the flipped card shows the detailed description of the project.
  • Next, we have the team-details cards, starting with the pod leader, then we have displayed all our pod mates in the slider along with their name, place, and the different social media handles.
  • Next up, we have the Contact Us form which is linked with formspree, which basically collects all the messages that any user will enter in the form and send it to the formspree dashboard.
  • At the end, we have the footer that displays the links related to MLH Organisation.

How we built it

  • We built it using ReactJS.
  • We first initialized the boilerplate react codebase using the create-react-app utility.
  • Then, we created individual components like navbar, footer, cards for projects, cards for team members, form, and finally integrated them together.
  • We then looked into more UI styling using custom CSS.
  • We have also used tailwindcss in the project for higher customization, productivity, and clean code.
  • And we have given efforts to make it responsive for any platform.

Challenges we ran into

  • UI styling was something that took us a lot of time than anticipated.
  • We also faced some issues during deployment, which were ultimately resolved.
  • It took us some time to get familiar with ReactJS

Accomplishments that we're proud of

  • Building a fully functional website from scratch.
  • Following the GitHub best practices.
  • Making the website responsive to a great extent.
  • Utilising custom styling for a nice user experience.

What we learned

  • Different frontend tech-stacks including HTML, CSS, Javascript, ReactJS library
  • Git & GitHub workflow
  • Explored various deployment utilities
  • Continuous deployment using Travis CI
  • Team collaboration

What's next for Pod-2.1.2-Website

  • We have listed out the tasks/issues for the future scopes of the website.
  • We are planning to make it a dynamic website by implementing features like add and update project details and team member details along with an admin login rather than a static one.
  • Adding more features like dark mode support, gallery section which will show all the images or videos with our pod to store our memories in one place.
  • Achievements section, which would list out all the achievements of our pod mates/teams during the entire Fellowship.

Built With

Share this project: