Merge pull request #9 from EdTract/refactor/components-and-styles

Refactor: Revitalize Components and Styles for Enhanced Performance and Consistency

Author: Programmer-RD-AI

.firebase/hosting.YnVpbGQ.cache

@@ -1,13 +1,12 @@
-404.html,1717860215833,6537619fa0edb6a05c3fa83265461172fea2307ecff34424f323310c8c8eb4be
-index.html,1717860071628,6bb6ea0e768591cd3a9117e6fbb22c501828161a31109f6be8f000d5d56240e6
-asset-manifest.json,1717860071628,1057f43e975ac2a2626edbe1e0ee55e17837fa8f264b5df9d4756df3000b4656
-manifest.json,1717860058936,90ef6b7ee0341b32fddf19b4ded4c8fa09039cd428bb3518df89c01d1745eb39
-robots.txt,1717860058936,2544ca049f223a42bff01f72ad930a5edba75bbb7199d0f8430a02ff5aca16ec
-static/css/main.ddc554d1.css,1717860071640,bc50c73d9791d1434fbefd36b57b4842b001bafcf0c38b8ffbd7257841a546de
-static/js/453.9113e28b.chunk.js,1717860071640,9322d2f411e7661c2cb7d934b37d3d5b3c57baab6ce7055156f879e8ca8fbc4c
-static/css/main.ddc554d1.css.map,1717860071648,31ea6d83a0fec588d5f05f645b6a2b83dd39c01ce8a829731e8c985c6e1b5674
-static/js/main.488c6468.js.LICENSE.txt,1717860071644,79000665ecf6ab75ebdb74114ee1a053dede9b39ecce36c4d87a55a200ccd159
-static/js/453.9113e28b.chunk.js.map,1717860071644,a88471ab7a13b4d38779b385ba9be5cb694ea289b818ec528b5fabbec08d2924
-logo.png,1717860058936,fc0c55b3ea575ffb5690a6391f7306dd0fd0b834ad99a7b7ef1593da0d2b4b5c
-static/js/main.488c6468.js,1717860071648,afe6aa13efe1b49cb706d02e92dce97e1f3949bc95155b11e0b1b5a48e76860a
-static/js/main.488c6468.js.map,1717860071644,7f154d4c20fdfbc08130d7b94a82ca3fd20f7bf579b7d4a725f0a77e7f7cc0a4
+asset-manifest.json,1717906062368,265f68e2bbba2a6892be2eb328fc384936d260b45e7d5feb48a4442168c712a4
+index.html,1717906062368,564deb1a78ec7ffd86b5649a740aa345962f41e15dfe3f0de7bbc3da06e43270
+manifest.json,1717906050468,90ef6b7ee0341b32fddf19b4ded4c8fa09039cd428bb3518df89c01d1745eb39
+robots.txt,1717906050468,2544ca049f223a42bff01f72ad930a5edba75bbb7199d0f8430a02ff5aca16ec
+static/css/main.1e6d6c35.css,1717906062380,f68d731ceba0df6233c6418e7bd252ef1431bb87ce50a7b5bf8c87ba99e9303a
+static/css/main.1e6d6c35.css.map,1717906062380,0e6925dfafad9769cd9ffbbd1a38a9a61212c291613da807692cdef5aba4c9a5
+static/js/453.9113e28b.chunk.js,1717906062380,9322d2f411e7661c2cb7d934b37d3d5b3c57baab6ce7055156f879e8ca8fbc4c
+static/js/453.9113e28b.chunk.js.map,1717906062380,a88471ab7a13b4d38779b385ba9be5cb694ea289b818ec528b5fabbec08d2924
+static/js/main.4dab00a8.js.LICENSE.txt,1717906062380,c3be17e167b9804cb2586c997403b1fae9a242af6b6d99c6a69bbdafb7ffcd7a
+logo.png,1717906050468,fc0c55b3ea575ffb5690a6391f7306dd0fd0b834ad99a7b7ef1593da0d2b4b5c
+static/js/main.4dab00a8.js,1717906062380,f9c0edec35740a3abab93bb4a82a6ab99de63f81059bae0b50118a2b80edec6d
+static/js/main.4dab00a8.js.map,1717906062380,a6286504890d56bed2953b203c79aef4a704f67c7483dd234e507a6b236d85a4

README.md

@@ -1,70 +1,161 @@
-# Getting Started with Create React App
+# EdTract
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+EdTract is an educational platform designed to provide a safe and secure environment for students to interact, collaborate, and learn. This repository contains the frontend code for EdTract, developed using React.js, Redux, and React Router.
 
-## Available Scripts
+## Table of Contents
 
-In the project directory, you can run:
+- [EdTract](#edtract)
+  - [Table of Contents](#table-of-contents)
+  - [Introduction](#introduction)
+  - [Team Details](#team-details)
+    - [Team Members](#team-members)
+  - [Problem Statement, Background \& Motivation, and Solution](#problem-statement-background--motivation-and-solution)
+    - [Problem Statement](#problem-statement)
+    - [Background \& Motivation](#background--motivation)
+    - [Solution](#solution)
+  - [Product Description and Product Uniqueness](#product-description-and-product-uniqueness)
+    - [Product Description](#product-description)
+    - [Product Uniqueness](#product-uniqueness)
+  - [Business Model and Marketing Plan](#business-model-and-marketing-plan)
+    - [Business Model](#business-model)
+    - [Marketing Plan](#marketing-plan)
+  - [Implementation Plan](#implementation-plan)
+  - [User Scenario](#user-scenario)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Contributing](#contributing)
+  - [License](#license)
 
-### `npm start`
+## Introduction
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+EdTract is an innovative EdTech solution aimed at improving the educational experience for secondary and high school students in Sri Lanka. By providing a secure and structured platform, EdTract mitigates the adverse effects of social media and promotes a more inclusive and supportive educational environment.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+## Team Details
 
-### `npm test`
+- **Team Name**: CodeChefs
+- **University**: Informatics Institute of Technology
+- **Domain**: Education
+- **Product Name**: EdTract
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### Team Members
 
-### `npm run build`
+- **Neluki Navithma Hamangoda**
+  - Email: [[email protected]](mailto:[email protected])
+  - Phone: 0779493696
+- **Manula Imantha Jayabodhi**
+  - Email: [[email protected]](mailto:[email protected])
+  - Phone: 0766438922
+- **Ranuga Disansa Gamage**
+  - Email: [[email protected]](mailto:[email protected])
+  - Phone: 0777169804
+- **Thasara Danidi Bavanya Surage**
+  - Email: [[email protected]](mailto:[email protected])
+  - Phone: 0772428588
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## Problem Statement, Background & Motivation, and Solution
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### Problem Statement
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+The extensive use of social media among college students has far-reaching implications for the educational landscape. Exposure to irrelevant and harmful content impacts academic performance and emotional stability. Additionally, the unequal distribution of information within Sri Lanka limits access to quality education for marginalized students. Addressing these challenges is essential for promoting equitable opportunities and breaking the cycle of poverty.
 
-### `npm run eject`
+### Background & Motivation
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+During our schooling years, we lacked a specific platform to connect with our schoolmates. The COVID-19 pandemic exacerbated this issue, leading to stress and loneliness due to limited social interaction. Students turned to social media, which exposed them to negative effects like increased stress, cyberbullying, and decreased well-being. EdTract aims to provide a safer alternative for educational and extracurricular interaction.
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Solution
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+EdTract is a web-based platform where students can interact with peers from different schools securely. It facilitates communication on educational matters and extracurricular activities, aiming to improve the education of 4.2 million students in Sri Lanka. The platform offers various features to foster collaboration, reduce social media usage, and bridge the digital divide.
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+## Product Description and Product Uniqueness
 
-## Learn More
+### Product Description
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+EdTract is a web-based interactive workspace for students, enabling collaboration through integrated chat and document sharing. Features include:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+1. Interaction with pupils from other schools via built-in chat.
+2. Resource sharing through file sharing features.
+3. Multilingual support.
+4. Community building for project organization.
+5. Personalized event alerts via email.
+6. Student verification through principals.
+7. Teacher and parent monitoring of student activity.
+8. Showcasing student accomplishments.
+9. Role-specific student search functionality.
+10. An event calendar for nationwide school events.
 
-### Code Splitting
+### Product Uniqueness
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+EdTract stands out by offering a secure and structured environment focused on education and collaboration. Its features ensure safe interaction, monitored activities, and inclusivity through multilingual support and personalized alerts.
 
-### Analyzing the Bundle Size
+## Business Model and Marketing Plan
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+### Business Model
 
-### Making a Progressive Web App
+EdTract will be available through subscription plans, both for individual students and schools. Plans include:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+- Monthly or annual personal subscriptions.
+- Affordable per-head cost for school subscriptions.
+- A 3-month free trial to encourage adoption.
+- Promotions in educational videos and collaboration with schools for awareness.
 
-### Advanced Configuration
+### Marketing Plan
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+Targeting students in grade 6 and upwards, the marketing plan includes:
 
-### Deployment
+- Collaborations with education influencers and advocates.
+- Content marketing through educational blogs and success stories.
+- Workshops, discussions, and competitions to attract new users.
+- Gradual expansion starting from Colombo to the entire Western province and eventually nationwide and internationally.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+## Implementation Plan
 
-### `npm run build` fails to minify
+1. **Design and Architecture**: Define system architecture and component interactions.
+2. **Frontend Development**: Develop responsive user interfaces with React.js.
+3. **Backend Development**: Build scalable APIs with FastAPI.
+4. **Database Setup**: Integrate Firebase and GCP for data storage.
+5. **DevOps Integration**: Automate infrastructure and deployment processes.
+6. **Security Implementation**: Ensure data security with OAuth 2.0, RBAC, and encryption.
+7. **Testing and QA**: Conduct comprehensive testing to ensure reliability and performance.
+8. **Deployment and Launch**: Deploy to production and ensure smooth launch.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+## User Scenario
+
+For students, EdTract is a one-stop-shop for learning-related activities in a safe environment. It offers features like scheduling study sessions, real-time chat, extracurricular group joining, and resource sharing, making learning enjoyable and collaborative.
+
+## Installation
+
+To set up the project locally, follow these steps:
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/EdTract/EdTract-ReactJS.git
+   cd EdTract-ReactJS
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Start the development server:
+   ```bash
+   npm start
+   ```
+
+## Usage
+
+For detailed usage instructions, refer to the respective pages in the `src/pages/home` directory and the `README.md` file in the backend repository.
+
+## Contributing
+
+Contributions are welcome! Feel free to open issues or submit pull requests to help improve EdTract. Ensure you follow the contribution guidelines outlined in the `CONTRIBUTING.md` file.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+---
+
+EdTract aims to transform the educational experience for students in Sri Lanka by providing a safe, collaborative, and engaging platform. Start exploring and contributing to EdTract today!

src/components/Alert.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { remove } from "../features/alerts";
-import "../styles/Alert.css"; // Importing custom CSS for additional styling
+import "../styles/components/Alert.css"; // Importing custom CSS for additional styling
 
 const Alert = () => {
   const flashedMessages = useSelector((state) => state.alerts.values);

src/components/Footer.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import "../styles/components/Footer.css";
+import {
+  FaFacebookF,
+  FaTwitter,
+  FaInstagram,
+  FaLinkedinIn,
+} from "react-icons/fa";
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <Container>
+        <Row>
+          <Col md={4}>
+            <h5>Company</h5>
+            <ul className="list-unstyled">
+              <li>About Us</li>
+              <li>Careers</li>
+              <li>Contact Us</li>
+            </ul>
+          </Col>
+          <Col md={4}>
+            <h5>Quick Links</h5>
+            <ul className="list-unstyled">
+              <li>Home</li>
+              <li>Services</li>
+              <li>Blog</li>
+            </ul>
+          </Col>
+          <Col md={4}>
+            <h5>Follow Us</h5>
+            <div className="social-icons">
+              <a href="#" className="social-icon">
+                <FaFacebookF />
+              </a>
+              <a href="#" className="social-icon">
+                <FaTwitter />
+              </a>
+              <a href="#" className="social-icon">
+                <FaInstagram />
+              </a>
+              <a href="#" className="social-icon">
+                <FaLinkedinIn />
+              </a>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col className="text-center mt-4">
+            <p>&copy; 2024 Your Company. All rights reserved.</p>
+          </Col>
+        </Row>
+      </Container>
+    </footer>
+  );
+}

src/components/Forms/ContactForm.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import "../../styles/components/Forms/ContactForm.css";
+const ContactForm = ({ onSubmit }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({ name, email, message });
+    setName("");
+    setEmail("");
+    setMessage("");
+  };
+
+  return (
+    <form className="contact-form" onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="Your Name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        required
+      />
+      <input
+        type="email"
+        placeholder="Your Email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+      />
+      <textarea
+        placeholder="Your Message"
+        rows="5"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        required
+      ></textarea>
+      <button type="submit">Send Message</button>
+    </form>
+  );
+};
+
+export default ContactForm;

src/components/Forms/LoginForm.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { FcGoogle } from "react-icons/fc";
+import "../../styles/components/Forms/LoginForm.css";
+export default function LoginForm({
+  handleEmailAndPasswordSubmit,
+  handleGoogleSubmit,
+}) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  return (
+    <>
+      <form
+        className="login-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleEmailAndPasswordSubmit({ email, password });
+        }}
+      >
+        <label htmlFor="email">Email address</label>
+        <input
+          type="email"
+          id="email"
+          placeholder="Enter email"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+          }}
+        />
+
+        <label htmlFor="password">Password</label>
+        <input
+          type="password"
+          id="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => {
+            setPassword(e.target.value);
+          }}
+        />
+        <button type="submit" className="login-button">
+          Login
+        </button>
+      </form>
+      <div className="login-or">or</div>
+      <button
+        className="google-login-button"
+        onClick={() => {
+          handleGoogleSubmit();
+        }}
+      >
+        <FcGoogle size="20px" style={{ marginRight: "10px" }} />
+        Login with Google
+      </button>
+    </>
+  );
+}