HossamGouda / control-panel

Control Panel Project

This project was developed as part of my course with Hasoub Academy. It is a Control Panel application built using various technologies and tools.

Technologies Used

• JavaScript
• HTML
• CSS
• Webpack

Project Structure

The project structure is as follows:

└── 📁frontend-control-panel-main
    └── .babelrc
    └── 📁src
        └── add-product.html
        └── add-user.html
        └── 📁assets
            └── 📁fonts
                └── janna-bold.woff
                └── janna.woff
            └── 📁images
                └── black-pants.jpg
                └── black-shirt.jpg
                └── brown-shoe.jpg
                └── circle.svg
                └── confitti.svg
                └── dw-watch.jpg
                └── profile.png
                └── running-shoe.jpg
                └── Thumbs.db
                └── upload.svg
            └── 📁js
                └── banner.js
                └── chart.js
                └── tabs.js
                └── upload.js
            └── 📁sass
                └── 📁base
                    └── fonts.scss
                    └── global.scss
                    └── links.scss
                    └── typography.scss
                └── 📁components
                    └── actions.scss
                    └── banner.scss
                    └── button.scss
                    └── card.scss
                    └── chart.scss
                    └── demo.scss
                    └── form.scss
                    └── help.scss
                    └── 📁icons
                        └── 📁fonts
                            └── icon.eot
                            └── icon.svg
                            └── icon.ttf
                            └── icon.woff
                        └── style.scss
                        └── variables.scss
                    └── list.scss
                    └── sidebar.scss
                    └── summary.scss
                    └── table.scss
                    └── tabs.scss
                    └── textfield.scss
                    └── upload.scss
                    └── _components.scss
                └── 📁config
                    └── colors.scss
                    └── layout.scss
                    └── variables.scss
                └── 📁hacks
                    └── add-product.scss
                └── 📁pages
                    └── index.scss
                    └── single-page.scss
                └── styles.scss
                └── 📁utilities
                    └── mixin-card.scss
                    └── spacing.scss
                └── 📁vendors
                    └── 📁icon
                        └── 📁demo-files
                            └── demo.css
                            └── demo.js
                        └── demo.html
                        └── 📁fonts
                            └── icon.eot
                            └── icon.svg
                            └── icon.ttf
                            └── icon.woff
                        └── Read Me.txt
                        └── selection.json
                        └── style.css
                        └── style.scss
                        └── variables.scss
        └── 📁components
            └── actions.html
            └── banner.html
            └── button.html
            └── card.html
            └── chart.html
            └── help.html
            └── list.html
            └── sidebar.html
            └── summary.html
            └── table.html
            └── tabs.html
            └── template.html
            └── textfield.html
            └── upload.html
        └── index.html
        └── index.js
        └── orders.html
        └── products.html
        └── 📁scripts
            └── create.js
        └── users.html
    └── webpack.config.js

Building the Project

To build the project, follow these steps:

1. Install the project dependencies by running npm install.
2. Run the development server using npm run dev.
3. Open your browser and navigate to http://localhost:9000 to view the application.

Additional Information

Include any additional information or instructions that you think would be helpful for users of your project.