diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index c8c5abc..4a30a9a 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.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 diff --git a/README.md b/README.md index 58beeac..3a337de 100644 --- a/README.md +++ b/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: [neluki.navithma@gmail.com](mailto:neluki.navithma@gmail.com) + - Phone: 0779493696 +- **Manula Imantha Jayabodhi** + - Email: [manula.20221047@iit.ac.lk](mailto:manula.20221047@iit.ac.lk) + - Phone: 0766438922 +- **Ranuga Disansa Gamage** + - Email: [go2ranuga@gmail.com](mailto:go2ranuga@gmail.com) + - Phone: 0777169804 +- **Thasara Danidi Bavanya Surage** + - Email: [sthasara26@gmail.com](mailto:sthasara26@gmail.com) + - 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! diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx index 04360f8..b66532b 100644 --- a/src/components/Alert.jsx +++ b/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); diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 0000000..227a9c5 --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/components/Forms/ContactForm.jsx b/src/components/Forms/ContactForm.jsx new file mode 100644 index 0000000..33e9ce7 --- /dev/null +++ b/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 ( +
+ setName(e.target.value)} + required + /> + setEmail(e.target.value)} + required + /> + + +
+ ); +}; + +export default ContactForm; diff --git a/src/components/Forms/LoginForm.jsx b/src/components/Forms/LoginForm.jsx new file mode 100644 index 0000000..980c091 --- /dev/null +++ b/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 ( + <> +
{ + e.preventDefault(); + handleEmailAndPasswordSubmit({ email, password }); + }} + > + + { + setEmail(e.target.value); + }} + /> + + + { + setPassword(e.target.value); + }} + /> + +
+
or
+ + + ); +} diff --git a/src/components/Forms/SignUpForm.jsx b/src/components/Forms/SignUpForm.jsx new file mode 100644 index 0000000..4180f77 --- /dev/null +++ b/src/components/Forms/SignUpForm.jsx @@ -0,0 +1,67 @@ +import React, { useState } from "react"; +import { FcGoogle } from "react-icons/fc"; +import "../../styles/components/Forms/SignUpForm.css"; +export default function SignUpForm({ + handleEmailandPasswordSubmit, + handleGoogleSubmit, +}) { + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + return ( + <> +
{ + handleEmailandPasswordSubmit({ email, name, password }); + }} + > + + { + setName(e.target.value); + }} + /> + + + { + setEmail(e.target.value); + }} + /> + + + { + setPassword(e.target.value); + }} + /> + +
+
or
+ + + ); +} diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index eceb61d..17d96a7 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -1,5 +1,5 @@ import React from "react"; -import "../styles/NavBar.css"; // Importing our custom CSS for styling +import "../styles/components/NavBar.css"; // Importing our custom CSS for styling import { Link } from "react-router-dom"; function Navbar() { diff --git a/src/pages/home/AboutUs.jsx b/src/pages/home/AboutUs.jsx index e0d5039..4555b92 100644 --- a/src/pages/home/AboutUs.jsx +++ b/src/pages/home/AboutUs.jsx @@ -1,5 +1,5 @@ import React from "react"; -import "../../styles/AboutUs.css"; // Importing our custom CSS for styling +import "../../styles/pages/AboutUs.css"; // Importing our custom CSS for styling function AboutUs() { return ( diff --git a/src/pages/home/ContactUs.jsx b/src/pages/home/ContactUs.jsx index 3154de0..b87b09d 100644 --- a/src/pages/home/ContactUs.jsx +++ b/src/pages/home/ContactUs.jsx @@ -1,15 +1,10 @@ import React from "react"; -import { useState } from "react"; -import "../../styles/ContactUs.css"; +import "../../styles/pages/ContactUs.css"; import FirestoreService from "../../firebase/Firestore"; import { Navigate } from "react-router-dom"; - +import ContactForm from "../../components/Forms/ContactForm"; function ContactUs() { - const [email, setEmail] = useState(""); - const [name, setName] = useState(""); - const [message, setMessage] = useState(""); - const handleSubmit = (e) => { - e.preventDefault(); + const handleSubmit = ({ name, email, message }) => { const data = { name: name, email: email, @@ -17,8 +12,6 @@ function ContactUs() { }; const firestoreInstance = new FirestoreService("contact", NaN, []); firestoreInstance.create(data); - // eslint-disable-next-line no-unused-expressions - setEmail(""), setName(""), setMessage(""); return ; }; return ( @@ -27,36 +20,7 @@ function ContactUs() {

Contact Us

Have any questions? We'd love to hear from you.

-
- { - setName(e.target.value); - }} - required - /> - { - setEmail(e.target.value); - }} - required - /> - - -
+

Or contact us directly:

Email: contact@myapp.com

diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx index b9075f3..a17b071 100644 --- a/src/pages/home/Home.jsx +++ b/src/pages/home/Home.jsx @@ -1,5 +1,5 @@ import React from "react"; -import "../../styles/Home.css"; // Importing our custom CSS for styling +import "../../styles/pages/Home.css"; // Importing our custom CSS for styling export default function Home() { return ( diff --git a/src/pages/home/Login.jsx b/src/pages/home/Login.jsx index bc39424..16a3318 100644 --- a/src/pages/home/Login.jsx +++ b/src/pages/home/Login.jsx @@ -1,35 +1,28 @@ -import React, { useState } from "react"; -import "../../styles/Login.css"; -import { FcGoogle } from "react-icons/fc"; +import React from "react"; +import "../../styles/pages/Login.css"; import FirebaseAuthentication from "../../firebase/Auth.js"; import { useDispatch } from "react-redux"; import { login } from "../../features/user"; import { Navigate } from "react-router-dom"; +import LoginForm from "../../components/Forms/LoginForm.jsx"; export default function Login() { - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); const dispatch = useDispatch(); - - const handleEmailAndPasswordSubmit = () => { + const handleEmailAndPasswordSubmit = ({ email, password }) => { const authInstance = new FirebaseAuthentication(); const [_, uid] = authInstance.signIn(email, password); - console.log(uid); dispatch(login({ uid })); return ; }; - const handleGoogleSubmit = async () => { const authInstance = new FirebaseAuthentication(); const result = await authInstance.signInWithGoogle(); if (result[0]) { const uid = result[1]; - console.log(uid); dispatch(login({ uid })); return ; } else { console.error("Error:", result[1]); - // Handle error condition here } }; @@ -39,48 +32,10 @@ export default function Login() {

Login

-
{ - e.preventDefault(); - handleEmailAndPasswordSubmit(); - }} - > - - { - setEmail(e.target.value); - }} - /> - - - { - setPassword(e.target.value); - }} - /> - -
-
or
- +
); diff --git a/src/pages/home/SignUp.jsx b/src/pages/home/SignUp.jsx index 50021ef..2be8285 100644 --- a/src/pages/home/SignUp.jsx +++ b/src/pages/home/SignUp.jsx @@ -1,21 +1,17 @@ -import React, { useState } from "react"; -import "../../styles/SignUp.css"; -import { FcGoogle } from "react-icons/fc"; +import React from "react"; +import "../../styles/pages/SignUp.css"; import FirebaseAuthentication from "../../firebase/Auth.js"; import { useDispatch } from "react-redux"; import { login } from "../../features/user"; import { Navigate } from "react-router-dom"; +import SignUpForm from "../../components/Forms/SignUpForm.jsx"; export default function SignUp() { - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); const dispatch = useDispatch(); - const handleEmailandPasswordSubmit = () => { + const handleEmailandPasswordSubmit = ({ email, name, password }) => { const authInstance = new FirebaseAuthentication(); // eslint-disable-next-line const [_, uid] = authInstance.register(email, password, name); - console.log(uid); dispatch(login({ uid })); return ; }; @@ -24,7 +20,6 @@ export default function SignUp() { const result = await authInstance.signInWithGoogle(); if (result[0]) { const uid = result[1]; - console.log(uid); dispatch(login({ uid })); return ; } else { @@ -38,58 +33,10 @@ export default function SignUp() {

Sign Up

-
{ - handleEmailandPasswordSubmit(); - }} - > - - { - setName(e.target.value); - }} - /> - - - { - setEmail(e.target.value); - }} - /> - - - { - setPassword(e.target.value); - }} - /> - -
-
or
- + ); diff --git a/src/routes/HomeRoutes.jsx b/src/routes/HomeRoutes.jsx index 193db67..42fdf04 100644 --- a/src/routes/HomeRoutes.jsx +++ b/src/routes/HomeRoutes.jsx @@ -6,6 +6,7 @@ import AboutUs from "../pages/home/AboutUs"; import ContactUs from "../pages/home/ContactUs"; import SignUp from "../pages/home/SignUp"; import Login from "../pages/home/Login"; +import Footer from "../components/Footer"; export function HomeRoutes() { return ( @@ -18,6 +19,7 @@ export function HomeRoutes() { } /> } /> +