IEEE Al-Azhar Official Website

The source code of IEEE Al-Azhar student activity's website. The website built to provide some of organization's services and represent information about it with simplicity in mind. Also it provides an opportunity for students to collaborate and contribute to enhance their programming and train to contribute to open source community.

Installation
Usage
Dependencies
Structure
Contribution
License

Installation

Make sure to have Node.js & yarn installed on your machine.

Clone this repo $ git clone https://github.com/IEEE-AZHAR/Official-website.git or using ssh.
$ cd Official-website.
Run $ yarn install or just yarn or run $ npm install to install dependencies and packages.

Usage

Run $ yarn start or $ npm start to start serving the app, then go to https://localhost:3000 to view the app. Yarn is recommended.

Dependencies

This app uses some dependencies:

react-router-dom - to implement routing in the app.
Bootstrap - to add visual designs to the app and helps making css better and easier.
react-helmet - to add titles and meta tags to the pages and improve seo of the page.
css modules - to scope the css and reduce unexpected visual results. See this for simplified explanation and how we use it in our app.
axios - to consume APIs and integrate with the back-end.
fontawesome - to add descriptive icons.
react-multi-carousel - to make a responsive carousel.
react-video - to make an interactive video.

Structure

The folder structure of the application. The app is modular, every module encapsulates its own components and services. Each module contains components folder which has the presentational components and also pages, also the module contains the services folder if it's dynamic which has all the services that integrate with the API.

.
├── CONTRIBUTING.md
├── jsconfig.json
├── LICENSE
├── package.json
├── package-lock.json
├── public
|   └──data
|      └── best-members.json
├── README.md
├── src
│   ├── App.js
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   └── video
│   ├── globals
│   │   ├── contexts
│   │   │   └── theme.context.js
│   │   └── routes.js
│   ├── index.js
│   ├── modules
│   │   ├── blog
│   │   │   ├── components
│   │   │   │   ├── blogCard
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── blogListPage
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   └── singleBlogPage
│   │   │   │       ├── index.js
│   │   │   │       └── style.module.css
│   │   │   └── services
│   │   │       └── blog.service.js
│   │   ├── contact
│   │   │   ├── components
│   │   │   │   ├── form
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── icon
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   └── page
│   │   │   │       ├── index.js
│   │   │   │       └── style.module.css
│   │   │   └── services
│   │   │       ├── contact.service.js
│   │   │       └── validation.service.js
│   │   ├── events
│   │   │   ├── components
│   │   │   │   ├── eventCard
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── eventsListPage
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   └── singleEventPage
│   │   │   │       ├── index.js
│   │   │   │       └── style.module.css
│   │   │   └── services
│   │   │       └── events.service.js
│   │   ├── static-pages
│   │   │   ├── about
│   │   │   │   └── components
│   │   │   │       ├── page
│   │   │   │       │   ├── components
│   │   │   │       │   │   ├── header
│   │   │   │       │   │   │   ├── index.js
│   │   │   │       │   │   │   └── style.module.css
│   │   │   │       │   │   ├── IEEEAZHARSection
│   │   │   │       │   │   │   ├── index.js
│   │   │   │       │   │   │   └── style.module.css
│   │   │   │       │   │   ├── IEEESection
│   │   │   │       │   │   │   ├── index.js
│   │   │   │       │   │   │   └── style.module.css
│   │   │   │       │   │   └── structure
│   │   │   │       │   │       ├── index.js
│   │   │   │       │   │       └── style.module.css
│   │   │   │       │   ├── index.js
│   │   │   │       │   └── style.module.css
│   │   │   │       ├── section
│   │   │   │       │   ├── index.js
│   │   │   │       │   └── style.module.css
│   │   │   │       └── video
│   │   │   │           └── index.js
│   │   │   └── home
│   │   │       ├── components
│   │   │       │   ├── bestMembers
│   │   │       │   │   ├── index.js
│   │   │       │   │   └── style.module.css
│   │   │       │   ├── intro
│   │   │       │   │   ├── index.js
│   │   │       │   │   └── style.module.css
│   │   │       │   └── page
│   │   │       │       ├── index.js
│   │   │       │       └── style.module.css
│   │   │       └── services
│   │   │           └── members.service.js
│   │   └── teamServices
│   │       ├── components
│   │       │   ├── serviceCard
│   │       │   │   ├── index.js
│   │       │   │   └── style.module.css
│   │       │   ├── servicesList
│   │       │   │   ├── index.js
│   │       │   │   └── style.module.css
│   │       │   └── singleServicePage
│   │       │       ├── index.js
│   │       │       └── style.module.css
│   │       └── store
│   │           └── services.json
│   ├── serviceWorker.js
│   ├── shared
│   │   ├── footer
│   │   │   ├── index.js
│   │   │   └── style.module.css
│   │   ├── header
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── layout
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── newsletterForm
│   │   │   ├── index.js
│   │   │   └── style.module.css
│   │   └── services
│   │       ├── newsletter.service.js
│   │       └── validation.service.js
│   └── styles.css
├── style-guide.md
└── yarn.lock

Contribution

Follow the guides mentioned in the CONTRIBUTING.md

AbudZohair/Official-Website