https://github.com/roqayamourad/myedu-assignment
The MyEdu project is a responsive and functional web app built using Angular, Ionic, and Capacitor. It Allows users to subscribe to a monthly surprise box for their child.
https://github.com/roqayamourad/myedu-assignment
angular ionic-framework jasmine-framework tailwind typescript
Last synced: about 1 month ago
JSON representation
The MyEdu project is a responsive and functional web app built using Angular, Ionic, and Capacitor. It Allows users to subscribe to a monthly surprise box for their child.
- Host: GitHub
- URL: https://github.com/roqayamourad/myedu-assignment
- Owner: RoqayaMourad
- Created: 2024-12-13T22:05:09.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-14T10:39:01.000Z (over 1 year ago)
- Last Synced: 2025-02-14T15:46:19.113Z (over 1 year ago)
- Topics: angular, ionic-framework, jasmine-framework, tailwind, typescript
- Language: HTML
- Homepage:
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Title: MyEdu
## Description
The **MyEdu** project is a responsive and functional web app built using Angular, Ionic, and Capacitor. It Allows users to subscribe to a monthly surprise box for their child. It consists of two main pages:
1. **Home Page**:
- Includes a header, footer, hero section, and "How It Works" section.
- Features two buttons that navigate to the subscription page.
2. **Subscription Page**:
- Allows users to subscribe to a monthly surprise box for their child.
- Includes a form for user and child information, topic selection, and a summary of the subscription.
## Features
1. **Pixel-perfect Design**: The UI implementation closely mirrors the Figma prototype.
2. **Responsive Layout**: Works seamlessly on both web and mobile browsers.
3. **Functional Navigation**: Buttons on the home page navigate to the subscription page.
4. **Subscription Form**: Captures user and child details.
5. **Testing**: Includes meaningful tests written with Jasmine.
## Getting Started
### Prerequisites
Ensure you have the following tools installed on your system:
- [Node.js](https://nodejs.org/) (v14 or later)
- [npm](https://www.npmjs.com/)
- [Ionic CLI](https://ionicframework.com/docs/cli)
- [Angular CLI](https://angular.io/cli)
### Installation
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd myedu
```
3. Install dependencies:
```bash
npm install
```
4. Run the project:
```bash
ionic serve
```
### Running Tests
To run tests, use the following command:
```
ng test
```
## Development Process
### Setup
1. The project was initialized using the following command:
```bash
ionic start myedu blank --type=angular
```
choose
```bash
standalone
```
2. The app creation wizard was not used.
3. A GitHub repository was set up, and meaningful commit messages were used throughout development.
4. install tailwind
```bash
ng add ngx-tailwind
```
5. add tailwind config in global.scss
```
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```
6. add components needed.
```
ionic generate component shared/header --standalone
ionic generate component subscribe --standalone
```
7. testing
```
ng test
```
## GitHub Repository
The project can be accessed at: [GitHub Repository Link]()
---
**Author**: [Roqaya Mourad]
**Email**: [roqayamourad@gmail.com]