https://github.com/0xomaradel/study-sphere
Study Sphere, your dedicated platform for education and learning. This React web application showcases an engaging hero section, detailed information about the platform, profiles of our experienced teachers, a list of available courses, and a convenient contact section using emailjs for easy communication.
https://github.com/0xomaradel/study-sphere
chakraui css formik framer-motion google-map-react html javascript react-icons reactjs swiper swiper-js typed-js yup
Last synced: 10 months ago
JSON representation
Study Sphere, your dedicated platform for education and learning. This React web application showcases an engaging hero section, detailed information about the platform, profiles of our experienced teachers, a list of available courses, and a convenient contact section using emailjs for easy communication.
- Host: GitHub
- URL: https://github.com/0xomaradel/study-sphere
- Owner: 0xOmarAdel
- Created: 2023-11-11T04:26:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-19T08:39:38.000Z (about 2 years ago)
- Last Synced: 2023-11-19T13:35:20.159Z (about 2 years ago)
- Topics: chakraui, css, formik, framer-motion, google-map-react, html, javascript, react-icons, reactjs, swiper, swiper-js, typed-js, yup
- Language: JavaScript
- Homepage: https://study-sphere.netlify.app
- Size: 367 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Study Sphere
This is a React web application for "Study Sphere," a platform designed for educational purposes. The app includes sections such as a hero banner, an about page, a teachers section, courses page, and a contact section using the emailjs library for email functionality.
## Features
- **Hero Section:**
- Engaging banner introducing Study Sphere.
- **About Section:**
- Information about the platform's mission and values.
- **Teachers Section:**
- Showcase of the teaching staff with relevant details.
- **Courses Page:**
- Display of available courses, possibly with brief descriptions.
- **Contact Section:**
- Integration with emailjs for users to contact Study Sphere.
## Technologies Used
- React
- Chakra UI for UI components
- Emailjs for contact form functionality
- Framer Motion for animations
- Swiper for sliders/carousels
- Google Map React for displaying location, if applicable
- Typed.js for dynamic text effects
- Formik and Yup for form handling and validation
## Prerequisites
- Node.js and npm should be installed on your machine.
## Installation
1. Clone the repository: `git clone https://github.com/0xOmarAdel/study-sphere.git`
2. Navigate to the project directory: `cd study-sphere`
3. Install dependencies: `npm install`
## Configuration
To set up the email functionality, you need to configure emailjs. Create a `.env` file in the project root directory and add the following lines:
```dotenv
REACT_APP_EMAILJS_USERID=your_emailjs_user_id
REACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id
REACT_APP_EMAILJS_SERVICEID=your_emailjs_service_id
```
## Usage
Run the following command to start the development server:
```bash
npm run dev
```
Open your browser and visit `http://localhost:3000` to access the app.
To deploy the app, follow the deployment process specific to your hosting platform.
## Demo
Visit the deployed version at [Study Sphere](https://study-sphere.netlify.app).