diff --git a/README.md b/README.md index 7a00a82..f50a55c 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,48 @@ -# Project README +# Project README 🎉 -## Project Overview +## Project Overview 🌐 -This is a full-stack project built using **Flask** as the backend framework and **Next.js** for the frontend. The project integrates with the **LinkedIn API** to fetch user profile data and display it on a portfolio page. It allows users to input a LinkedIn profile URL, retrieves the relevant profile data, and displays it in a well-structured portfolio format. - -The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, while the frontend is built using Next.js to provide a responsive UI displaying the fetched data, such as personal details, experience, education, projects, skills, and certifications. +This project is a full-stack application designed to create a dynamic portfolio page by leveraging **Flask** for the backend and **Next.js** for the frontend. It integrates with the **LinkedIn API** to fetch user profile data, allowing users to input a LinkedIn profile URL and display the relevant information in a structured format. The application showcases personal details, experience, education, projects, skills, and certifications. --- -## Features +## Features 🚀 - **Backend**: - The backend, powered by Flask, includes a REST API to fetch LinkedIn profile data using the `linkedin-api` library. + - Built with **Flask**, providing a REST API to retrieve LinkedIn profile data using the `linkedin-api` library. - **Frontend**: - The frontend uses React and Next.js to display the fetched LinkedIn profile data in a user-friendly portfolio layout. + - Developed using **Next.js** and **React**, ensuring a responsive and user-friendly interface to display the fetched LinkedIn profile data. --- -## Project Structure +## Project Structure 🗂️ + +```plaintext +├── backend/ # Contains the Flask application and API logic +├── frontend/ # Contains the Next.js frontend code +``` -- `backend/`: Contains the Flask application and API logic. -- `frontend/`: Contains the Next.js frontend code to display the portfolio. - --- -## Requirements +## Requirements 📋 ### Backend -- Python 3.10+ -- Flask -- linkedin-api library -- `requirements.txt` for other dependencies +- **Python**: 3.10+ +- **Flask** +- **linkedin-api** library +- Additional dependencies listed in `requirements.txt` ### Frontend -- Node.js -- Next.js -- React.js +- **Node.js** +- **Next.js** +- **React.js** --- -## Setup Instructions +## Setup Instructions ⚙️ ### Backend Setup (Flask) @@ -55,7 +55,7 @@ The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, 2. **Create a virtual environment**: - It is recommended to use a virtual environment to manage dependencies. + Using a virtual environment is recommended for managing dependencies. ```bash python3 -m venv venv @@ -64,7 +64,7 @@ The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, 3. **Install dependencies**: - Use the `requirements.txt` file to install all required libraries. + Use the `requirements.txt` file to install the necessary libraries. ```bash pip install -r requirements.txt @@ -72,7 +72,7 @@ The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, 4. **Configure LinkedIn API credentials**: - Ensure you have your LinkedIn username and password configured in the `config/config.py` file: + Add your LinkedIn username and password to the `config/config.py` file: ```python l_username = "your_linkedin_username" @@ -85,7 +85,7 @@ The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, flask run ``` - The server will be running at `http://127.0.0.1:5000/`. + The server will be accessible at `http://127.0.0.1:5000/`. ### Frontend Setup (Next.js) @@ -97,7 +97,7 @@ The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, 2. **Install Node.js dependencies**: - Make sure you have Node.js installed. Then install the required dependencies using npm or yarn: + Ensure Node.js is installed, then run: ```bash npm install @@ -111,42 +111,83 @@ The backend uses Flask and the `linkedin-api` library to interact with LinkedIn, 3. **Run the development server**: - After installing the dependencies, start the Next.js development server: + Start the Next.js development server: ```bash npm run dev ``` - This will start the frontend at `http://localhost:3000`. + The frontend will be available at `http://localhost:3000`. --- -## How the Project Works +## How the Project Works 🔍 -- The user sends a **POST** request to the `/api/linkedin/get-data` endpoint with a LinkedIn profile URL. -- The Flask backend uses the `linkedin-api` library to fetch the LinkedIn profile information. -- The frontend uses React and Next.js to display the retrieved data, including the user's name, headline, summary, experience, education, skills, projects, certifications, and languages, in a well-organized portfolio layout. +1. The user sends a **POST** request to the `/api/linkedin/get-data` endpoint with a LinkedIn profile URL. +2. The Flask backend utilizes the `linkedin-api` library to fetch the profile information. +3. The Next.js frontend displays the retrieved data, including the user's name, headline, summary, experience, education, skills, projects, certifications, and languages, in a well-organized portfolio layout. +--- -## Running Both Frontend and Backend +## Running Both Frontend and Backend ⚡ -After setting up both the backend and frontend, you can run them concurrently: +To run both the backend and frontend concurrently: -1. Start the Flask backend: +1. **Start the Flask backend**: ```bash cd backend flask run ``` -2. In another terminal, start the Next.js frontend: +2. **In a separate terminal, start the Next.js frontend**: ```bash cd frontend npm run dev ``` -You can now access the frontend via `http://localhost:3000` and interact with the backend API to fetch and display LinkedIn profile data. +You can now access the frontend at `http://localhost:3000` and interact with the backend API to fetch and display LinkedIn profile data. --- +## Contribution Guidelines 🤝 + +We welcome contributions to enhance this project! Here are some ways you can help: + +1. **Fork the repository** and create your branch: + ```bash + git checkout -b feature-branch + ``` +2. **Make your changes** and commit them: + ```bash + git commit -m 'Add new feature' + ``` +3. **Push to your branch**: + ```bash + git push origin feature-branch + ``` +4. **Create a pull request** explaining your changes. + +--- + +## Troubleshooting 🛠️ + +- **Flask server not running**: Ensure you have activated your virtual environment and installed all dependencies correctly. +- **LinkedIn API issues**: Check your LinkedIn credentials in `config/config.py` and ensure your account settings allow API access. +- **Frontend not loading**: Make sure the Next.js server is running and check for any console errors in your browser. + +--- + +## Potential Future Enhancements 🌟 + +- **User Authentication**: Implement user authentication for secure access to saved profiles. +- **Improved UI**: Enhance the user interface with additional design elements and animations. +- **Data Export**: Allow users to export their portfolio as a PDF or other formats. +- **Profile Comparison**: Enable users to compare multiple LinkedIn profiles side by side. +``` +--- + +## License 📄 + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. diff --git a/backend/readme.md b/backend/readme.md index cd05caf..f7432a9 100644 --- a/backend/readme.md +++ b/backend/readme.md @@ -1,2 +1,79 @@ -# todo -- create flask app \ No newline at end of file +# LinkedIn to Portfolio Backend + +## Project Overview 🌐 +This is the backend component of the **LinkedIn to Portfolio** project, built using Flask. It integrates with the LinkedIn API to fetch user profile data and provides a RESTful API for the frontend to display this information in a portfolio format. + +## Features ✨ +- **REST API**: Fetch LinkedIn profile data using the `linkedin-api` library. +- **User Authentication**: Secure access to the LinkedIn API using user credentials. +- **Data Retrieval**: Retrieve personal details, experience, education, projects, skills, and certifications from LinkedIn profiles. + +## Requirements 📦 +- Python 3.10+ +- Flask +- `linkedin-api` library + +## Setup Instructions 🛠️ + +### Backend Setup (Flask) +1. **Clone the Repository**: + ```bash + git clone https://github.com/Namit2111/Linkedin-to-resume + cd backend + ``` + +2. **Create a Virtual Environment**: + It is recommended to use a virtual environment to manage dependencies. + ```bash + python3 -m venv venv + source venv/bin/activate # On Windows: venv\Scripts\activate + ``` + +3. **Install Dependencies**: + Use the `requirements.txt` file to install all required libraries. + ```bash + pip install -r requirements.txt + ``` + +4. **Configure LinkedIn API Credentials**: + Ensure you have your LinkedIn username and password configured in the `config/config.py` file: + ```python + l_username = "your_linkedin_username" + l_pass = "your_linkedin_password" + ``` + +5. **Run the Flask Server**: + Start the Flask server using: + ```bash + flask run + ``` + The server will be running at [http://127.0.0.1:5000/](http://127.0.0.1:5000/). + +## How the Project Works 🔍 +1. The user sends a POST request to the `/api/linkedin/get-data` endpoint with a LinkedIn profile URL. +2. The Flask backend utilizes the `linkedin-api` library to fetch the LinkedIn profile information. +3. The retrieved data includes the user's name, headline, summary, experience, education, skills, projects, certifications, and languages, which are made available to the frontend for display. + +## Running Both Frontend and Backend 🚀 +To run both components of the project: +1. **Start the Flask Backend**: + ```bash + cd backend + flask run + ``` + +2. **Start the Next.js Frontend**: + Open another terminal and navigate to the frontend directory: + ```bash + cd frontend + npm run dev + ``` + Access the frontend via [http://localhost:3000](http://localhost:3000) to interact with the backend API. + +## License 📄 +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information. + +## Acknowledgments 🙏 +- Thanks to the developers of the `linkedin-api` library for providing a great tool to interact with LinkedIn's API. + +For any issues or contributions, feel free to open an issue or submit a pull request! \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index 0dc9ea2..f22e4ea 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,36 +1,44 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Frontend Overview 🌐 -## Getting Started +This project is a Next.js application bootstrapped with **create-next-app**. It serves as the user interface for our LinkedIn profile portfolio project. -First, run the development server: +## Getting Started 🚀 -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` +To get started with the frontend, follow these steps: -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +1. **Run the Development Server**: + Open your terminal and run one of the following commands: -You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. + ```bash + npm run dev + # or + yarn dev + # or + pnpm dev + # or + bun dev + ``` -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +2. **Open Your Browser**: + Navigate to [http://localhost:3000](http://localhost:3000) to see your application in action! 🎉 -## Learn More +3. **Edit the Page**: + You can start editing the page by modifying `app/page.js`. The page will auto-update as you make changes, providing instant feedback on your edits! 🔄 -To learn more about Next.js, take a look at the following resources: +## Custom Fonts 🎨 -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +This project utilizes **next/font** to automatically optimize and load **Inter**, a custom Google Font. This ensures your typography looks crisp and performs well across all devices. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +## Learn More 📚 -## Deploy on Vercel +To expand your knowledge of Next.js, check out the following resources: -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +- **[Next.js Documentation](https://nextjs.org/docs)**: Dive into the features and API of Next.js. +- **[Learn Next.js](https://nextjs.org/learn)**: Engage with an interactive tutorial to master Next.js. +- **[Next.js GitHub Repository](https://github.com/vercel/next.js)**: Explore the source code, report issues, and contribute to the community! -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +## Deploy on Vercel 🌍 + +The easiest way to deploy your Next.js app is by using the **Vercel Platform**, created by the team behind Next.js. + +For detailed deployment instructions, refer to the [Next.js Deployment Documentation](https://nextjs.org/docs/deployment).