Profile Express

Landing page
Form - about yourself
Form - work experiences
Form - social links
Form - customise theme colour
Portfolio generation success

Inspiration

Building a personal portfolio website from scratch can be tedious and time-consuming, especially for non-technical folks. It typically takes a few hours up to a few days, or even weeks for those with zero experience in web development. Paying freelance developers to build is not a long-term solution, as portfolio requires new professional updates and maintenance with time. Looking around, we chanced upon Shopify, which allows businesses to create a web presence and digitalize by providing tools to build an e-commerce site easily. Therefore, we are inspired to build a similar Shopify, but for personal portfolios.

What it does

Too busy to code a personal portfolio website from scratch by yourself? Fret not, with ProfileExpress, you can easily build a personal brand in a matter of minutes by simply filling up a form. We are looking at professionals in the tech space as our target audience. They could be engineers, UI/UX designers, product managers, scrum masters or business analysts. By using ProfileExpress, we could help relieve a huge time savings in building a personal portfolio website and provide free hosting all at zero costs for users. Hopefully, an individual could their improve personal branding, and increase their chances of securing job interviews.

How we built it

We built the front-end using React with a combination of vanilla CSS and Chakra UI components. We developed the back-end API endpoints using Next.js’s API routes feature. We integrated Next with MongoDB Atlas and Amazon S3 for documents persistent storage.

Challenges we ran into

This is the first time we are using Next.js, so we bumped into some difficulties in implementing some features, like generating dynamic pages using server-side rendering. Another challenge we encounter was to process image uploads from front-end. We had to process the uploading of images to S3 and updating of database in 1 POST request.

Accomplishments that we're proud of

We are proud of building a functional and polished product that provides real value. Furthermore, we also took extra effort to make our web app responsive so that it looks great on all devices.

What we learned

Next.js data fetching methods like static site generation and server-side rendering
NoSQL database. We are previous SQL database users and this is the first time we tried a NoSQL variant. We learned how to build a NoSQL schema with MongoDB
Integrating with Amazon S3 to store media files