Merge branch 'main' into main

AmruthaPariprolu · Jul 19, 2024 · f9e38bf · f9e38bf
2 parents 4753f98 + eaf524a
commit f9e38bf
Show file tree

Hide file tree

Showing 58 changed files with 3,219 additions and 586 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,20 @@
 <div align="center">
   <h1><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Laptop.png" alt="Laptop" width="50" height="50" /> DevLabs</h1>
-  <p>Welcome to DevLabs, a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. On DevLaps, you can discover a collection of free tools that can assist you in various aspects of your life. Moreover, you have the opportunity to contribute to this project by adding more tools to the database.</p>
+  <p>Welcome to DevLabs, a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. On DevLabs, you can discover a collection of free tools that can assist you in various aspects of your life. Moreover, you have the opportunity to contribute to this project by adding more tools to the database.</p>
   <p>Check out the live project at <a href="https://DevLabs-one.vercel.app">DevLabs</a></p>
-  <img src="https://github.com/HimanshuNarware/Devlabs/assets/83147410/a508cf73-6724-46d3-a66d-6b9a7811bfdd" alt="DevLaps" />
+  <img src="https://github.com/HimanshuNarware/Devlabs/assets/83147410/a508cf73-6724-46d3-a66d-6b9a7811bfdd" alt="DevLabs" />
 </div>
 
 ---
 
 ## 🌟 Our Mission
+
 Our website provides a platform for contributors from all over the world to share their ideas in the form of helpful websites that are free to use. It helps us save a ton of time by allowing us to access a list of all the websites in one location. Whether it be a tool or an educational platform, we may discover any type of website here. This makes it a platform for sharing knowledge!
 
 ---
 
 ## 💻 Tech Stack
+
 <!-- JavaScript -->
 <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript logo">
 
@@ -28,12 +30,67 @@ Our website provides a platform for contributors from all over the world to shar
 ---
 
 ## 🚀 Quick Start
+
 Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please open an issue or submit a pull request. Make sure to follow the project's code of conduct.
 
 ---
 
+<!-- Code of conduct -->
+<div>
+<h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="35" height="35"> Code of Conduct</h2>
+</div>
+
+Please note that this project is released with a [Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+
+
 ## 📦 Installation
 
+### With Docker
+
+You can clone the project directly from this repo to your local system.
+
+### 1. Clone the Repo
+
+```bash
+git clone https://github.com/username/Devlabs.git
+```
+
+### 2. Navigate to the project directory
+
+```bash
+cd Devlabs
+```
+
+### 3. Create Backend Environment
+
+```bash
+MONGODB_URI=<mongodb connection uri for the database>
+PORT=<port number on which backend is running>
+FRONTEND_URL=<url of the frontend>
+MAIL=<email from which to send mail to self>
+PASSWORD=<passkey corresponding to above mail>
+```
+
+### 4. Create Frontend Environment
+
+All the environment variables for react must be prefixed with `REACT_APP_`.
+
+```bash
+REACT_APP_BACKEND=<url of the backend>
+```
+
+### 5. Run Docker Compose
+
+```bash
+docker-compose up --build
+```
+
+You have to use build for the first time only then you can use `docker-compose up`
+
+Now follow all the steps from point 6 of without docker to contribute to the project.
+
+### Without Docker
+
 You can clone the project directly from this repo to your local system.
 
 ### 1. Clone the Repo
@@ -83,7 +140,8 @@ git checkout -b YourBranchName
 ### 7. Make Your Changes to the Source Code
 
 To add a new tool:
-   > Go to **src > DB > `product.json`** & add your code
+
+> Go to **src > DB > `product.json`** & add your code
 
 ```bash
 {
@@ -94,11 +152,11 @@ To add a new tool:
     description: "< Description of product >"
 },
 ```
-  - Ensure that your URLs are short. It is recommended to use bitly for URL shortening.
-  - Descriptions should not exceed 10-12 words.
 
+- Ensure that your URLs are short. It is recommended to use bitly for URL shortening.
+- Descriptions should not exceed 10-12 words.
 
-### 8.  Stage Your Changes
+### 8. Stage Your Changes
 
 ⚠️ **Make sure** not to commit `package.json` or `package-lock.json` file
 
@@ -125,56 +183,69 @@ git push origin YourBranchName
 ```
 
 ### 11. Create a Pull Request
+
 Create a [Pull Request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)!
 
+<div>
+  <h2><img src="https://github.com/Meetjain1/wanderlust/assets/133582566/90f3930e-5a12-4a4e-8ac9-0dc7d5396adb" width="35" height="35">Are Ready to Contribute?</h2>
+</div>
+
+If you would like to contribute to the project then kindly go through [Contributing Guidelines](CONTRIBUTING.md) to understand everything from setup to necessary instructions.
+
+
 <div align="center">
   <h2>Let's Collaborate and Make DevLabs Even Better! 💻🌟</h2>
 </div>
 
 ### ✨ Features
 
 1. User Authentication:
-Secure user registration and login using JWT.
-OAuth integration for social logins (Google, Facebook).
+   Secure user registration and login using JWT.
+   OAuth integration for social logins (Google, Facebook).
 
 2. User Profiles:
-Customizable user profiles.
-Profile picture upload and bio section.
+   Customizable user profiles.
+   Profile picture upload and bio section.
 
 3. Tool Rating & Reviews
-Users can rate and review tools.
-Aggregate ratings for each tool displayed.
+   Users can rate and review tools.
+   Aggregate ratings for each tool displayed.
 
 4. Favorites & Bookmarking
-Users can bookmark their favorite tools.
-Quick access to bookmarked tools from the profile.
+   Users can bookmark their favorite tools.
+   Quick access to bookmarked tools from the profile.
 
 5. Tool Categories & Tags
-Tools categorized for easy browsing.
-Tagging system for quick filtering and searching.
+   Tools categorized for easy browsing.
+   Tagging system for quick filtering and searching.
 
 6. Advanced Search
-Search tools by name, category, or tags.
-Filter results by ratings and reviews.
+   Search tools by name, category, or tags.
+   Filter results by ratings and reviews.
 
 7. Responsive Design
-Fully responsive design for mobile, tablet, and desktop.
+   Fully responsive design for mobile, tablet, and desktop.
 
 8. Notifications
-Email notifications for new tools, reviews, and updates.
+   Email notifications for new tools, reviews, and updates.
 
 9. Admin Dashboard
-Manage users, tools, and reviews.
-Analytics on tool usage and user engagement.
+   Manage users, tools, and reviews.
+   Analytics on tool usage and user engagement.
 
 10. Documentation
-Comprehensive documentation for developers.
-API documentation for integrating with other platforms.
+    Comprehensive documentation for developers.
+    API documentation for integrating with other platforms.
+
+### 📚 Learn
+To know more about project, please go through [Learn](learn.md)
 
 ### 🌍 Community
+
 ### 🏆 Contributors
+
 Recognize the individuals who have contributed to the project. You can use tools like All Contributors to automatically generate a list of contributors.
-``` bash
+
+```bash
 npx all-contributors-cli add <username> <contribution>
 ```
-
diff --git a/backend/Dockerfile b/backend/Dockerfile
@@ -1,12 +1,7 @@
-FROM node:alpine AS builder
+FROM node:alpine
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm install
 COPY . .
-
-FROM node:alpine
-WORKDIR /app
-COPY --from=builder /app /app
-RUN npm install
 EXPOSE 8000
-CMD ["npm","start"]
+CMD ["npm", "start"]
diff --git a/compose.yaml → docker-compose.yaml b/compose.yaml → docker-compose.yaml
@@ -15,4 +15,16 @@ services:
     ports:
       - "8000:8000"
     env_file:
-      - ./backend/.env
+      - ./backend/.env
+    depends_on:
+      - mongo
+
+  mongo:
+    image: mongo:latest
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo-data:/data/db
+
+volumes:
+  mongo-data:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -10,4 +10,4 @@ WORKDIR /app
 COPY --from=builder /app /app
 RUN npm install
 EXPOSE 3000
-CMD ["npm","start"]
+CMD ["npm", "start"]
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -11,54 +11,75 @@
     />
     <meta
       name="keywords"
-      content="Devlabs, devlabsstore, Developer tools, DevLabs, Free tools, Technology tools, Productivity tools, Daily utilities tools, developer needs, DevLaps, Developer tools"
+      content="Devlabs, devlabsstore, Developer tools, DevLabs, Free tools, Technology tools, Productivity tools, Daily utilities tools, developer needs, DevLabs, Developer tools"
     />
     <meta name="author" content="Himanshu Narware" />
 
     <!-- Open Graph Meta Tags -->
     <meta property="og:title" content="Devlabs - Your Free Tool Repository" />
-    <meta property="og:description" content="Search for free and helpful tools tailored to your needs, built by an amazing open-source community." />
+    <meta
+      property="og:description"
+      content="Search for free and helpful tools tailored to your needs, built by an amazing open-source community."
+    />
     <meta property="og:image" content="%PUBLIC_URL%/og-image.png" />
     <meta property="og:url" content="https://devlabsstore.com" />
     <meta property="og:type" content="website" />
 
     <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Devlabs - Your Free Tool Repository" />
-    <meta name="twitter:description" content="Search for free and helpful tools tailored to your needs, built by an amazing open-source community." />
+    <meta
+      name="twitter:description"
+      content="Search for free and helpful tools tailored to your needs, built by an amazing open-source community."
+    />
     <meta name="twitter:image" content="%PUBLIC_URL%/twitter-image.png" />
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Indie+Flower&family=Jersey+15&family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="%PUBLIC_URL%/styles.css"> <!-- Custom CSS for additional styling -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6WS166VH7E"></script>
-    <script src="https://kit.fontawesome.com/8e211f0d34.js" crossorigin="anonymous"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Indie+Flower&family=Jersey+15&family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="%PUBLIC_URL%/styles.css" />
+    <!-- Custom CSS for additional styling -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-6WS166VH7E"
+    ></script>
+    <script
+      src="https://kit.fontawesome.com/8e211f0d34.js"
+      crossorigin="anonymous"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-      gtag('config', 'G-6WS166VH7E');
+      gtag("config", "G-6WS166VH7E");
     </script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
     <script>
       const options = {
-        bottom: '64px', // default: '32px'
-        right: 'unset', // default: '32px'
-        left: '32px', // default: 'unset'
-        time: '0.5s', // default: '0.3s'
-        mixColor: '#fff', // default: '#fff'
-        backgroundColor: '#fff',  // default: '#fff'
-        buttonColorDark: '#100f2c',  // default: '#100f2c'
-        buttonColorLight: '#fff', // default: '#fff'
+        bottom: "64px", // default: '32px'
+        right: "unset", // default: '32px'
+        left: "32px", // default: 'unset'
+        time: "0.5s", // default: '0.3s'
+        mixColor: "#fff", // default: '#fff'
+        backgroundColor: "#fff", // default: '#fff'
+        buttonColorDark: "#100f2c", // default: '#100f2c'
+        buttonColorLight: "#fff", // default: '#fff'
         saveInCookies: false, // default: true,
-        label: '🌓', // default: ''
-        autoMatchOsTheme: true // default: true
-      }
+        label: "🌓", // default: ''
+        autoMatchOsTheme: true, // default: true
+      };
       const darkmode = new Darkmode(options);
       darkmode.showWidget();
     </script>

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -21,6 +21,7 @@ const Review = lazy(() => import("./Component/Review"));
 const BookMark = lazy(() => import("./Component/BookMark"));
 const Contact = lazy(() => import("./Component/Contact"));
 const Signup = lazy(() => import("./Component/Signup"));
+const Profile = lazy(() => import("./Component/Profile"));
 const RemoteJobs = lazy(() => import("./pages/RemoteJobs"));
 const AI = lazy(() => import("./pages/AI"));
 const UI = lazy(() => import("./pages/UI"));
@@ -33,6 +34,13 @@ const CodingPlatform = lazy(() => import("./pages/CodingPlatform")); // Correcte
 const CoursesPlatform = lazy(() => import("./pages/CoursesPlatform"));
 const Collaboration = lazy(() => import("./pages/Collaboration"));
 const Productivity = lazy(() => import("./pages/Productivity"));
+const Extensions = lazy(() => import("./pages/Extensions"));
+
+const Movies = lazy(() => import("./pages/Movies"));
+
+const Ui = lazy(() => import("./pages/UserInterface"));
+
+const RemoteJob = lazy(() => import("./pages/RemoteJob"));
 
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
@@ -57,6 +65,7 @@ function App() {
           <Route path="/faq" element={<Faq />} />
           <Route path="/rateus" element={<Rateus />} />
           <Route path="/contact" element={<Contact />} />
+          <Route path="/profile" element={<Profile />} />
           <Route path="/remote-jobs" element={<RemoteJobs />} />
           <Route path="/ai" element={<AI />} />
           <Route path="/movies-series" element={<Movie />} />
@@ -68,6 +77,13 @@ function App() {
           <Route path="/courses-platform" element={<CoursesPlatform />} />
           <Route path="/productivity-tools" element={<Productivity />} />
           <Route path="/collaboration-tools" element={<Collaboration />} />
+          <Route path="/extensions" element={<Extensions />} />
+
+          <Route path="/movies&series" element={<Movies />} />
+
+          <Route path="/ui-designs" element={<Ui />} />
+          <Route path="/remote-job" element={<RemoteJob />} />
+
           {/* Define other routes as needed */}
           {/* <Route path="*" element={<NotFound />} /> 404 route */}
         </Routes>