major updated #4

new design

README.md

@@ -1,45 +1,41 @@
-# Open-Source-Recommender
-As a developer👨‍💻, I faced many problems in finding open-source projects🤷‍♂️. Don't worry! I brought you guys an application to find your open-source project by just typing in your GitHub username.✌️
-The application recommends Open Source Repositories based on your interests and languages that interest you.
+![alt text](public/application.png)
 
-## Features🤖
+# open-source-recommender
 
-- Retrieves repository details of a GitHub user, including project names, descriptions, programming languages, and topics.
-- Searches and gathers open source projects based on user language and topic interests using the GitHub API.
-- Generates recommendations by comparing user repository details with the collected open-source projects.
-- Provides a web interface using Streamlit to input user information and display recommended projects with link previews.
+This will be a free public-facing web application designed to find open-source projects for beginners and developers.
 
+Search your next contribution to open source easily! A free web app is here to help every developer find cool open-source projects of interest that fit their skillset. Just enter your GitHub username; our intelligent recommender system will do the rest.
 
+## Why Use Open-Source Project Finder?
 
+- **Perfect for Beginners**: Jump into open source with projects perfect for your current skill level.
+- **Tailored Recommendations**: Recommendations on projects based on your GitHub profile, preferred languages and interests.
+- **Expand Your Horizons**: New technologies, new projects you never would have crossed.
+- **Absolutely Free**: Just free – gift to the developer community.
 
-https://github.com/Hk669/Open-Source-Recommender/assets/96101829/eb45c74f-82ee-4c61-91f5-468d352084d8
+## How It Works
 
+1. Input your GitHub username
+2. Indicate your preferred programming languages and topics of Interest *Optional*
+3. Get a personalized list of open source projects matching your profile *Optional*
 
+the app analyzes your Github repositories against the vast database of open source projects from github to provide the best recommended match.
 
+## Features
 
+- **User-Friendly Interface:** Clean, intuitive design for seamless performance.
+- **GitHub Integration**: Bases Users and Projects on the GitHub API for proper user data and details of projects
+- **Smart Recommendations**: It fits appropriate projects to each user using robust algorithms.
+- **Diverse Project Pool**: Multiple projects from different domains and projects which are of any difficulty level
+- **Quick Access**: There are multiple direct links to recommended projects to access them fast.
 
+## Get Started
 
-## Installation
+**still under construction*
 
-1. Clone the repository:
+## Feedback
 
-   ``` shell
-   git clone https://github.com/Hk669/Open-Source-Recommender.git
-
-   ```
-
-2. Install the required dependencies:
-
-   ```shell
-   pip install -r requirements.txt
-   ```
-
-3. Obtain a GitHub Personal Access Token (PAT):
-   - Visit https://github.com/settings/tokens and generate a new token with the necessary permissions.
-   - Copy the token and update the `ACCESS_TOKEN` variable in the `user.py` file with your token.
-
-## Contributions
-- Contributions to the Open Source recommender project are welcome. If you find any bugs, have suggestions for improvements, or want to add new features, please submit an issue or create a pull request.
+If you have any suggestions, find any bugs, or have success stories you'd like to share with me, please do so. Your input will make the experience better for all.
 
 ## License
 

client/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
+    "hamburger-react": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

client/src/App.css

@@ -3,11 +3,16 @@
 body {
     font-family: 'Inter', sans-serif;
     background-color: #ffffff;
-    color: #333;
+    color: #000000;
     margin: 0;
     padding: 0;
 }
 
+.content-container {
+  width: 70%;
+  margin: 0 auto;
+}
+
 .App {
     align-items: center;
     justify-content: center;
@@ -41,89 +46,55 @@ body {
 
 }
 
-form {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 500px;
-}
-
-form label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #444;
-}
 
-form input {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 15px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-size: 1rem;
-}
-
-form button {
-    width: 100%;
-    padding: 10px;
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px;
-    color: white;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s;
+@media (max-width: 600px) {
+    .App-header h1 {
+        font-size: 1.5rem;
+    }
 }
 
-form button:hover {
-    background-color: #0056b3;
+.app-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
 }
 
-h2 {
-    font-size: 1.5rem;
-    margin-top: 30px;
-    margin-bottom: 10px;
-    color: #555;
+.form-container {
+  width: 100%;
+  transition: width 0.3s ease-in-out;
 }
 
-ul {
-    list-style-type: none;
-    padding: 0;
-    width: 100%;
-    max-width: 500px;
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    margin-bottom: 20px;
+.form-container.with-recommendations {
+  width: 50%;
 }
 
-ul li {
-    padding: 10px;
-    border-bottom: 1px solid #ddd;
+.recommendations-container {
+  width: 45%;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
 }
 
-ul li:last-child {
-    border-bottom: none;
+.recommendations-container.visible {
+  opacity: 1;
 }
 
-ul li a {
-    text-decoration: none;
-    color: #007bff;
-}
+/* ... (rest of your CSS remains the same) ... */
 
-ul li a:hover {
-    text-decoration: underline;
-}
+@media (max-width: 900px) {
+  .app-container {
+    flex-direction: column;
+  }
 
-@media (max-width: 600px) {
-    .App-header h1 {
-        font-size: 1.5rem;
-    }
+  .form-container,
+  .form-container.with-recommendations,
+  .recommendations-container {
+    width: 100%;
+  }
 
-    form, ul {
-        width: 90%;
-    }
+  .recommendations-container {
+    margin-top: 20px;
+  }
 }

client/src/App.js

@@ -4,38 +4,52 @@ import Input from "./components/Input/Input";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { Recommendation } from "./components/Recommendation/Recommendation";
-import { Navbar } from "./components/Navbar/Navbar";
+import Navbar from "./components/Navbar/Navbar";
+
 
 function App() {
   const [recommendations, setRecommendations] = useState([]);
   const [loading, setLoading] = useState(false);
 
-  const handleSubmit = async (recommendations) => {
+  const handleSubmit = async (inputData) => {
     setLoading(true);
-    console.log("recommendations");
-    console.log(recommendations);
-
-    setRecommendations(recommendations);
-    setLoading(false);
+    try {
+      setRecommendations(inputData);
+    } catch (error) {
+      console.error("Error fetching recommendations:", error);
+      // You might want to show an error message to the user here
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <div className="App">
       <Navbar />
-      <div className="App-main">
-        <div className="Input">
+      <div className="app-container">
+        <div
+          className={`form-container ${
+            recommendations.length > 0 ? "with-recommendations" : ""
+          }`}
+        >
           <Input onSubmit={handleSubmit} />
         </div>
-        {loading ? (
-          <p>Loading recommendations...</p>
-        ) : recommendations.length > 0 ? (
-          <div className="Recommendation">
+        <div
+          className={`recommendations-container ${
+            recommendations.length > 0 ? "visible" : ""
+          }`}
+        >
+          {loading ? (
+            <div className="loading-container">
+              <div className="loader"></div>
+              <p>Loading recommendations...</p>
+            </div>
+          ) : recommendations.length > 0 ? (
             <Recommendation recommendations={recommendations} />
-          </div>
-        )
-          : null}
-        <ToastContainer />
+          ) : null}
+        </div>
       </div>
+      <ToastContainer />
     </div>
   );
 }