MakeContributions · mukul314 · May 20, 2023 · May 3, 2023 · May 4, 2023 · May 19, 2023
diff --git a/GSSoC-CONTRIBUTORS.md b/GSSoC-CONTRIBUTORS.md
@@ -0,0 +1,24 @@
+# Contributors and Colleges
+
+## Introduction
+
+This file has been created for the contributors of GSSoC 2023 to begin their journey with open source. It lists the contributors and their respective colleges.
+
+## Instructions
+
+If you are participating in GSSoC 2023 and would like to contribute to this project, please follow the steps mentioned in the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+
+Please add your name and college above if you are a contributor:
+
+## Contributors
+
+- Kapil \
+  Amity University, Noida, Uttar Pradesh
+- Ridhiman Kaur Dhindsa \
+  IIT Guwahati
+- Tushar Banik \
+  IIT Guwahati
+- Shivani \
+  JSS Science and Technology University, Mysore
+- Manash \
+  Nitte Meenakshi Institute of Technology, Bangalore
diff --git a/README.md b/README.md
@@ -17,8 +17,8 @@ To get started with this project, you'll need to follow these steps:
 1. Install Node.js and MongoDB on your local machine.
 2. Clone this repository to your local machine.
 3. Install the project dependencies by running `npm install` in both the client and server directories.
-4. Start the frontend by running `npm run dev` in the client directory.
-5. Start the backend by running `node server.js` in the server directory.
+4. Start the frontend `cd client/` by running `npm run dev` in the client directory.
+5. Start the backend `cd server/` by running `node App.js` in the server directory.
 6. Open your web browser and navigate to `http://localhost:3000`.
 
 ## Contributing

diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="" />
+    <link rel="icon" type="image/svg+xml" href="./logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Stoccoin</title>
   </head>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -15,7 +15,8 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "react-refresh": "^0.14.0"
+    "react-refresh": "^0.14.0",
+    "react-social-icons": "^5.15.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

diff --git a/client/src/App.css b/client/src/App.css
@@ -40,3 +40,5 @@
 .read-the-docs {
   color: #888;
 }
+
+
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
@@ -1,35 +1,101 @@
-import React from 'react';
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInstagram,faTwitter,faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
+
 
 function Footer() {
   return (
     <footer className="bg-white">
       <div className="container mx-auto px-4 py-8">
         <hr className="border-gray-700 my-8" />
         <div className="flex flex-wrap justify-center">
-
           <div className="w-full md:w-1/3 px-3 mb-3 md:mb-0 text-left">
             <h2 className="text-xl font-bold text-black mb-4">About Us</h2>
-            <p className="text-gray-600 leading-loose" style={{maxWidth: "300px"}}>We're a web app for trading stocks and crypto with real-time market data and news feeds to help you make informed investment decisions.</p>
+            <p
+              className="text-gray-600 leading-loose"
+              style={{ maxWidth: "300px" }}
+            >
+              We're a web app for trading stocks and crypto with real-time
+              market data and news feeds to help you make informed investment
+              decisions.
+            </p>
+            <p
+              className="text-gray-600 leading-loose"
+              style={{ maxWidth: "300px" }}
+            >
+              We're a web app for trading stocks and crypto with real-time
+              market data and news feeds to help you make informed investment
+              decisions.
+            </p>
           </div>
-
+
+
           <div className="w-full md:w-1/3 px-3 mb-3 md:mb-0 text-left">
             <h2 className="text-xl font-bold text-black mb-4">Follow Us</h2>
             <ul className="list-none">
-              <li className="mb-2"><a href="https://www.instagram.com/stoccoin/" className="text-gray-600 hover:text-black"><i className="fab fa-instagram-f"></i>Instagram</a></li>
-              <li className="mb-2"><a href="https://twitter.com/stoc_coin" className="text-gray-600 hover:text-black"><i className="fab fa-twitter"></i>Twitter</a></li>
-              <li className="mb-2"><a href="https://www.linkedin.com/company/stoccoin/" className="text-gray-600 hover:text-black"><i className="fab fa-instagram"></i>LinkedIn</a></li>
-              <li className="mb-2"><a href="https://www.kooapp.com/profile/stoccoin/" className="text-gray-600 hover:text-black"><i className="fab fa-instagram"></i>Koo</a></li>            </ul>
+              <div>
+                <li className="mb-2">
+                  <a
+                    href="https://www.instagram.com/stoccoin/"
+                    className="text-gray-600 hover:text-black"
+                  >
+<FontAwesomeIcon icon={faInstagram} className="text-indigo-500 text-3xl mr-2" />
+                    Instagram
+                  </a>
+                </li>
+              </div>
+              <li className="mb-2">
+                <a
+                  href="https://twitter.com/stoc_coin"
+                  className="text-gray-600 hover:text-black"
+                >
+                 <FontAwesomeIcon icon={faTwitter} className="text-indigo-500 text-3xl mr-2" />
+                  Twitter
+                </a>
+              </li>
+              <li className="mb-2">
+                <a
+                  href="https://www.linkedin.com/company/stoccoin/"
+                  className="text-gray-600 hover:text-black"
+                >
+                 <FontAwesomeIcon icon={faLinkedinIn} className="text-indigo-500 text-3xl mr-2" />
+                  LinkedIn
+                </a>
+              </li>
+
+              <li className="mb-2">
+                <a
+                  href="https://www.kooapp.com/profile/stoccoin/"
+                  className="text-gray-600 hover:text-black"
+                >
+                  Koo
+                </a>
+              </li>
+            </ul>
           </div>
           <div className="w-full md:w-1/4 px-3 mb-3 md:mb-0 text-left">
             <h2 className="text-xl font-bold text-black mb-4">Newsletter</h2>
             <form>
-              <input type="email" placeholder="Enter your email" className="bg-gray-200 rounded py-2 px-3 text-gray-200 w-full mb-2" />
-              <button type="submit" className="bg-gray-600 hover:bg-gray-700 rounded py-2 px-4 text-white w-full">Subscribe</button>
+              <input
+                type="email"
+                placeholder="Enter your email"
+                className="bg-gray-200 rounded py-2 px-3 text-gray-200 w-full mb-2"
+              />
+              <button
+                type="submit"
+                className="bg-gray-600 hover:bg-gray-700 rounded py-2 px-4 text-white w-full"
+              >
+                Subscribe
+              </button>
+
             </form>
           </div>
         </div>
-        <br/>
-        <p className="text-gray-500 text-center">&copy; 2023 Stoccoin. All rights reserved.</p>
+        <br />
+        <p className="text-gray-500 text-center">
+          &copy; 2023 Stoccoin. All rights reserved.
+        </p>
+        <br />
       </div>
     </footer>
   );

diff --git a/client/src/components/Pricing.jsx b/client/src/components/Pricing.jsx
@@ -12,7 +12,7 @@ export default function Example() {
     </div>
     <div className="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
       {/* Pricing Card */}
-      <div className="flex flex-col p-6 mx-auto max-w-lg text-center bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8">
+      <div className="flex flex-col p-6 mx-auto max-w-lg text-center bg-white rounded-lg border border-gray-100 dark:border-gray-600 xl:p-8 hover:shadow-2xl hover:scale-105">
         <h3 className="mb-4 text-2xl font-semibold">Free</h3>
         <p className="font-light sm:text-lg">
           Get a taste of trading with our free plan.
@@ -107,7 +107,7 @@ export default function Example() {
         </a>
       </div>
       {/* Pricing Card */}
-      <div className="flex flex-col p-6 mx-auto max-w-lg text-center bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8">
+      <div className="flex flex-col p-6 mx-auto max-w-lg text-center bg-white rounded-lg border border-gray-100 dark:border-gray-600 xl:p-8 hover:shadow-2xl hover:scale-105">
         <h3 className="mb-4 text-2xl font-semibold">Professional</h3>
         <p className="font-light sm:text-lg">
           Unlock advanced trading features with our premium plan.
@@ -202,7 +202,7 @@ export default function Example() {
         </a>
       </div>
       {/* Pricing Card */}
-      <div className="flex flex-col p-6 mx-auto max-w-lg text-center bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8">
+      <div className="flex flex-col p-6 mx-auto max-w-lg text-center bg-white rounded-lg border border-gray-100 dark:border-gray-600 xl:p-8 hover:shadow-2xl hover:scale-105">
         <h3 className="mb-4 text-2xl font-semibold">Enterprise</h3>
         <p className="font-light sm:text-lg">
           Custom solutions for your trading needs.