An application so that users can personalize their own resume.
This is a Next.js project bootstrapped with create-next-app.
This project is a modern web application developed with Next.js and deployed on Vercel, combining profile management, web page customization, and social features. It allows users to create and personalize their own responsive website, add interactive content (text, images, HTML, YouTube videos, etc.), and easily manage styling through a visual interface without coding.
The application features secure authentication with NextAuth, advanced role and permission management, and an image storage system using UploadThing. Each user can search for and follow other profiles, turning the application into an interactive social network.
With a smooth user experience, an intuitive interface, and a secure architecture, this project provides a complete solution for creating, customizing, and sharing online content.
- Secure authentication with NextAuth, ensuring reliable session management.
- Route protection based on user roles: access is restricted according to defined permissions.
- Error handling with clear messages to inform the user.
- Each user has a personal profile, including an image gallery stored via UploadThing.
- Ability to search for and follow other users, creating a social network dynamic.
- Profile view, edit, and delete functionalities.
- Each user can create and customize their own responsive web page with five screen types: 2XL, XL, LG, MD, and Mobile.
- The profile serves as the default homepage, but multiple sections/pages can be added.
- Available elements on a page:
- Text
- Images
- Custom HTML content
- iFrame (e.g., YouTube)
- Each element can be visually customized through an intuitive interface, without the need to code in CSS.
- Dynamic links to reference other elements or pages within the application.
- Skeleton loading with Suspense to enhance fluidity and prevent waiting times during data loading.
- Real-time error handling to guide users in case of issues with forms or data loading.
- Front-end: Next.js (React)
- Back-end: RESTful API with PostgreSQL
- File Storage: UploadThing
- Hosting: Vercel
Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen App in http://localhost:3000.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Database has been created with vercel, you have to create a new postgres database and fill your .env file corresponding with your db credentials in vercel.
Seeding database structure and some initial data test with command: npm run seed
Test code with lint: npm run lint
Build in production: npm run build
For the login, we need to generate a secret key for the application. This key is used to encrypt cookies, ensuring the security of user sessions. Run the following command : openssl rand -base64 32
Then, in .env file, add the generated key to the AUTH_SECRET variable:
AUTH_SECRET=your-secret-key
NOTE : For auth to work in production, we'll need to update our environment variables in your Vercel project too.
On the homepage, there will be a brief presentation of the application. There is also a left-side navbar with login and account creation buttons. This menu can be hidden using the arrow in the middle to view the page in full.
The profile consists of several parts:
- Sections: All the sections that have been created; new ones can be added.
- View/Edit Button
- Image Gallery
- Styles
- Section Content
To create an element, simply select the blocks you want to merge, choose the type of element you want to create, and define the content.
⛰️Image element
To create an image, simply select one from your gallery. It will be displayed automatically. New images can also be added.
<💻/> HTML element
If you want a more customizable element, you can also add your own HTML styles and apply any styles you like.
⛓️💥 Reference element
A window displaying all your elements by type will appear, allowing you to select the reference element. You can also create a new element from an existing one to copy its content and styles instead of recreating it multiple times.
👁️ Displays
You can customize the appearance based on the screen size.
When selecting an element, a modification window will appear. You can edit any styles you want or add a link to make the element clickable. On the bottom you'll find a button tu delete the element.
All changes are made in real-time, allowing the user to see the site's appearance instantly. 🕛
The application includes a social network feature. You can access other users' profiles and follow them.
