Pack Account Handler Web App

This repository contains the code for a web app that handles user profile pages. The main purpose of this app is to allow users to edit their information and upload a new profile image.

Requirements

The following are the requirements for this task:

• Users should be able to edit their information.
• Users should be able to upload a new profile image.

Task Details

• Start Date: 29/08/2023
• Deadline: 02/09/2023

Technology Stack

For this project, I have chosen the following technologies:

• Framework: Next.js

  • I chose Next.js because it provides a simplified development process and allows for easy creation and deployment of full-stack web apps. Additionally, Next.js has built-in server-side rendering capabilities, which can improve page loading times and SEO performance.

• Language: TypeScript

  • I chose TypeScript over JavaScript because it provides static typing, which makes code easier to read, write, and maintain.

Packages and Tools

The following packages and tools are used in this project:

• Prettier

  • Prettier is used for automatic code formatting, ensuring a consistent and clean codebase. It also helps prevent formatting conflicts when collaborating with others.

• ESLint

  • ESLint is used to enforce code conventions and catch potential errors. It helps maintain code quality and consistency throughout the project.

• Next-Auth

  • Next-Auth is used for authentication. It provides an out-of-the-box solution for authentication, eliminating the need to implement tokens, APIs from scratch.

• Tailwind CSS

  • Tailwind CSS is used for styling the app. It provides a utility-first approach to CSS, making it easy to create responsive and customizable designs.

• UploadThing

  • UploadThing is a package used for handling profile image uploads. It simplifies the process and avoids reinventing the wheel.

Getting Started

To run this app locally, follow these steps:

1. Clone this repository.
2. Install the required dependencies using npm install.
3. Start the development server using npm run dev.
4. Open your browser and navigate to http://localhost:3000 to access the app.

Learnings

1. I should have used Cloudinary for image uploading instead of the UploadThing package. I've used Cloudinary before and it would have made the process easier.

2. I realized that I don't enjoy working with Next.js as a full-stack framework. In the future, I might consider opting for a serverless architecture instead.

3. I really liked using Vercel and Next.js for deployment. The process was smooth and hassle-free.

Conclusion

This web app aims to provide users with a seamless experience for managing their account information and profile images. By leveraging the power of Next.js, TypeScript, and other tools.