Phorfolio: Porfolio Builder for developers

Members

Rocky Essel
- GitHub
- Twitter

Description

In the vast world of technology, whether you're an iOS developer, web developer, or exploring various niches within this dynamic field, having a portfolio is essential. Your portfolio serves as a powerful beacon, shedding light on your skills, knowledge, and the projects that define your expertise.

Why I Chose This Problem & Problem Statement

When I began my development journey, I thought learning HTML, CSS, and JS would be enough to start building projects. However, I quickly realized that the challenge was not just building projects but also documenting them. Documentation is crucial because it enables you to showcase your skills to potential employers and fellow developers accurately.

Introduction to Phorfolio

My journey started with the creation of my first portfolio, a month-long dedication. However, upon completion, I was unsatisfied. I was so inexperienced that I hadn't even heard of GitHub, a fundamental platform for hosting web projects!

Subsequent attempts at building my portfolio were marked by setbacks and disappointments, particularly in the realm of design. Nevertheless, amid these difficulties, I honed my card design skills.

Determined to overcome my design hurdles, I turned to a crash course on YouTube to gain insights into basic design principles. Armed with this newfound knowledge, I embarked on my fourth portfolio attempt. Unfortunately, it too fell short of my expectations.

But giving up was never an option. With perseverance and the lessons learned from my YouTube crash course, I embarked on my fifth portfolio. This time, I achieved the aesthetics and responsiveness I had aimed for. And that's the very portfolio I proudly showcase today.

With Phorfolio, we aim to simplify your journey by offering a platform that empowers you to create a professional developer portfolio without the struggles and setbacks I encountered. Phorfolio is your partner in showcasing your skills, knowledge, and projects in the best possible light. Welcome to a new era of developer portfolios.

My Previous Portfolio:

Phorfolio Provides

You have a dashboard to document your projects and write about challenges. It offers a faster way to showcase your projects to friends and potential employers, with fields to fill in about your projects.

Phorfolio gives you a subdomain with pages like home, resume, contact, project, and articles, similar to any website you build. It also provides an interface for selecting your preferred language, libraries, frameworks, and more. You have complete control over the content you write on your About and Resume pages.

Tools and Technologies Used to Build Phorfolio

Next.js: Next.js is a popular React framework that was used for building the frontend of Phorfolio.
NextAuth: NextAuth.js was employed for authentication and user management in Phorfolio.
TypeScript (Frontend): TypeScript was used on the front-end of the application to enhance code quality and maintainability by adding static typing to JavaScript.
Tailwind CSS: Tailwind CSS was used for styling and design.
AWS Polly: Amazon Polly was used for Text-to-Speech (TTS) functionality.
Sanity CMS (files): Sanity CMS was utilized for handling files and content management.
JavaScript (Backend): JavaScript was used on the backend of the application to handle server-side logic and API interactions.
Express.js: Express.js, a Node.js web application framework, was used to build the backend API and handle server-related tasks.
Outerbase: Outerbase played a pivotal role as a data management platform for the MySQL database used in Phorfolio. It simplified data handling, security, and organization within a cloud-based environment.

The Main Hero: Outerbase

The cornerstone of Phorfolio's power lies in Outerbase. Outerbase is a valuable tool for managing data in your MySQL database. It simplifies working with data in the cloud, ensuring security and organization. With Outerbase, you and your team can complete database tasks more efficiently, work faster, and collaborate effectively. It offers an easy-to-use interface similar to a spreadsheet for managing your MySQL database. Additionally, it includes features like EZQL for running queries, Commands for converting queried data into API endpoints, Plugins, Data Catalog, and SQL query fields to streamline data-related tasks.

Outerbase Features Used

Command for performing CRUD operations on accessed data
EZQL for running queries with plain text
Queries for saving queries generated by EZQL for easy and faster access
Dashboard for providing insight into the data

Phorfolio Features

Improved SEO for better search engine visibility
User dashboard for easy CRUD operations and informative alerts
WYSIWYG text editor for rich text content
Insights on likes, view count, and comments on posts
Integrated Text-to-Speech (TTS) for content accessibility
Contact page for user communication
Commenting options, including built-in and Disqus integration
Real-time messaging with users
Subdomain provision

10 practical benefits of Phorfolio for new developers

Simplified Portfolio Building: Phorfolio makes it easy for new developers to create professional portfolios, even without extensive web development experience.
Improved Discoverability: The platform enhances the visibility of portfolios through effective SEO, helping new developers get noticed by potential employers and collaborators.
Effortless Content Management: New developers can manage and update their articles, projects, and resume details with a user-friendly interface.
User-Friendly Dashboards: Intuitive dashboards empower new developers to create, edit, and delete portfolio items without technical hurdles.
No Coding Required: Phorfolio offers a WYSIWYG text editor, allowing new developers to create rich content without the need for coding skills.
Performance Insights: The platform provides insights into post engagement, including likes, views, and comments, helping new developers gauge their audience's response.
Accessibility: Phorfolio's Text-to-Speech (TTS) feature ensures that content is accessible to all users, including those with different learning preferences.
Networking Opportunities: Real-time chat capabilities encourage new developers to connect with peers and potential collaborators, fostering professional relationships.
Customization for Skills: Phorfolio allows new developers to customize their portfolios to showcase their preferred languages, libraries, frameworks, and more.
Structured Layout: With subdomains for portfolios and predefined pages (home, resume, contact, project, and articles), Phorfolio provides new developers with a structured and professional layout for their portfolios.

Challenges

Outerbase Beta Bugs: As of writing this article, Outerbase was in its beta stage, which came with its fair share of minor bugs. However, the Outerbase team was quick and efficient in addressing these issues. Their swift response ensured a smoother experience for users like me.
Time Management: One significant challenge I faced was time management. Balancing a full-time job, which required me to leave for work at 6 am and return home between 7:20 pm to 8:00 pm, with coding was no small feat. I had to find precious pockets of time to dedicate to my project.
Authentication on Subdomains: Implementing authentication on subdomains posed another challenge. But hopefully got resolved.
Folder Structure: Structuring my project's folders effectively was a daunting task. As the project grew, I realized the importance of a well-organized structure, but it was also a struggle to manage the scale of the project.

How Outerbase Made It Easier

Data Schema Design: Outerbase, with its powerful EZQL, simplified the process of designing my data schema. It allowed me to efficiently build the schema, create references, insert sample data, and test queries simultaneously. This streamlined approach significantly sped up development.
Data Flow Visualization: Outerbase played a crucial role in simplifying data flow visualization. With much of the heavy lifting handled by Outerbase, I could focus more on designing and refining the data flow, making the overall development process smoother.
Time Savings: By automating various tasks and reducing manual intervention, Outerbase freed up a substantial amount of my time. This enabled me to allocate more resources to building and refining my project, resulting in a more robust end product.
Responsive Troubleshooting: Whenever I encountered a problem, the Outerbase team was readily available to assist. Their responsive support and willingness to address issues ensured that roadblocks were swiftly overcome, minimizing downtime.

Know Issue

To Prevent Bugs, Complete Component Sections and add Articles, Projects, Resume, Contact, and About Information; Otherwise, the Page Will Result in a 404 Error.

Description: I've identified a known issue that requires your attention to ensure the smooth functioning of your system. In order to avoid encountering a 404 error, it is imperative to follow these steps:

Complete Component Sections: Ensure that all required component sections are filled out.
Add Articles and Projects: Populate your system with articles and projects as needed. This step is essential for proper functionality.
Include Your Resume and Contract Information: Make sure to add your resume and contact details.
Provide About Information: Populate the 'About' section with relevant information.

Failure to complete these essential steps may result in a 404 error when accessing the respective pages. It's recommended to follow these instructions to maintain a seamless user experience.