Skip to content

Commit

Permalink
finish v=first version of website
Browse files Browse the repository at this point in the history
  • Loading branch information
Ahmed Mohamed committed Jul 5, 2022
1 parent 127df60 commit 0189f34
Show file tree
Hide file tree
Showing 4 changed files with 265 additions and 56 deletions.
85 changes: 33 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,70 +1,51 @@
# Getting Started with Create React App
# My Personal Website

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This is the Source Code [**Web Guider**](https://web-guider.vercel.app/) Website.

## Available Scripts
---

In the project directory, you can run:
# Discreption

### `npm start`
[**Web Guider**] Website is an Website that contain some of packages and libs and VS Code Extensions that help you as a frontend or backend developer and speed your developemtn process.

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
---

The page will reload when you make changes.\
You may also see any lint errors in the console.
# App Features

### `npm test`
- Reponsive
- Nice Design with Tailwind Framework
- Speed & Good Performance
- A lot of Extensions and Packages

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.
---

### `npm run build`
# Languages & Technologies

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
### Lauages That used in this Web App:

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
<div style="display: flex; justify-content: center; align-items: center; gap: 20px;">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><img src="https://img.icons8.com/color/48/000000/html-5--v1.png" alt="drawing" width="48" height="48"/></a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS?retiredLocale=ar"><img src="https://img.icons8.com/color/48/000000/css3.png" alt="drawing" width="48" height="48"/></a>
<a href="https://www.javascript.com/"><img src="https://img.icons8.com/color/48/000000/javascript--v2.png" width="48" height="48"/></a>
</div>

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### Technolohies that used in this App:

### `npm run eject`
<div style="display: flex; justify-content: center; align-items: center; gap: 20px;">
<a href="https://reactjs.org/"><img src="https://cdn-icons-png.flaticon.com/512/3334/3334886.png" alt="drawing" width="48" height="48"/></a>
<a href="https://tailwindcss.com/"><img src="https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg" width="48" height="48"/></a>
<a href="https://sass-lang.com/"><img src="https://cdn-icons-png.flaticon.com/512/5968/5968358.png" width="48" height="48"/></a>
</div>

**Note: this is a one-way operation. Once you `eject`, you can't go back!**
### Other Libs & Packages:

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.
- [**Preline UI**](https://preline.co/docs/index.html)
- [**Raact Router**](https://reactrouter.com/)
- [**React Icons**](https://react-icons.github.io/react-icons/)
- [**React Syntax Highlighter**](https://www.npmjs.com/package/react-syntax-highlighter)

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.
---

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.
# Web App Screenshot

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

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)

### Analyzing the Bundle Size

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)

### Making a Progressive Web App

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)

### Advanced Configuration

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)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

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)
![Web Guider]()
120 changes: 120 additions & 0 deletions src/db/backend.json
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,105 @@
"npmUrl": "https://www.npmjs.com/package/axios",
"offecialUrl": "https://axios-http.com/",
"installCommand": "npm i axios"
},
{
"id": 1,
"modalId": "lodash",
"name": "Lodash",
"description": "This Library you must use it, It is Great Library that have a lot of functions that will ease your work with javascript..",
"npmUrl": "https://www.npmjs.com/package/lodash",
"offecialUrl": "https://lodash.com/",
"installCommand": "npm i lodash"
},
{
"id": 2,
"modalId": "yargs",
"name": "Yargs",
"description": "Yargs helps you build interactive command line tools, by parsing arguments and generating an elegant user interface.",
"npmUrl": "https://www.npmjs.com/package/yargs",
"offecialUrl": "http://yargs.js.org/",
"installCommand": "npm i yargs"
},
{
"id": 3,
"modalId": "multer",
"name": "Multer",
"description": "The Most popular Library that will help you in File upload handling, You can use it in some easy steps in You project.",
"npmUrl": "https://www.npmjs.com/package/multer",
"installCommand": "npm i multer"
},
{
"id": 4,
"modalId": "telegraf",
"name": "Telegraf",
"description": "Telegraf is a NPM package that give you ability to make telegram bot, It have tens of features that will give you ability to make your great telegram bot.",
"npmUrl": "https://www.npmjs.com/package/telegraf",
"offecialUrl": "https://telegraf.js.org/",
"installCommand": "npm i telegraf"
},
{
"id": 5,
"modalId": "nightmare",
"name": "Telegraf",
"description": "Great NPM library that you can use it in you web scraping work, It have a nice features that will give you what you need.",
"npmUrl": "https://www.npmjs.com/package/nightmare",
"installCommand": "npm i nightmare"
},
{
"id": 6,
"modalId": "bcrypt",
"name": "bcrypt",
"description": "Nice Pckage that used in Authuntication and Authorization process, It used to hash password which give your application more security layer.",
"npmUrl": "https://www.npmjs.com/package/bcrypt",
"installCommand": "npm i bcrypt"
},
{
"id": 7,
"modalId": "shortid",
"name": "Short ID",
"description": "Great NPM Package that make short and random text to use it in your projects, You can use it in URL Shortner Application for Example.",
"npmUrl": "https://www.npmjs.com/package/shortid",
"installCommand": "npm i shortid"
},
{
"id": 8,
"modalId": "image-downloader",
"name": "Image Downloader",
"description": "Nice package that you can use it in to download images from web, It have easy way to implement in your Application.",
"npmUrl": "https://www.npmjs.com/package/image-downloader",
"installCommand": "npm i image-downloader"
},
{
"id": 9,
"modalId": "cors",
"name": "CORS",
"description": "One of the most popular problem in api calling from a nother origin is CORS problem, By this package you can control in origins that can make requests to your websites.",
"npmUrl": "https://www.npmjs.com/package/cors",
"installCommand": "npm i cors"
},
{
"id": 10,
"modalId": "jsonwebtoken",
"name": "Json Web Token",
"description": "One of the most popular pacjage that used to implement Authuntication and Authorization process in web Applications.",
"npmUrl": "https://www.npmjs.com/package/jsonwebtoken",
"installCommand": "npm i jsonwebtoken"
},
{
"id": 11,
"modalId": "chalk",
"name": "Chalk",
"description": "Nice NPM Package that help you to edit Terminal text styles like changing text background ot text colors.",
"npmUrl": "https://www.npmjs.com/package/chalk",
"installCommand": "npm i chalk"
},
{
"id": 12,
"modalId": "validator",
"name": "Validator",
"description": "A library of string validators and sanitizers, It have a lot of valitor schemas like email, password, ...etc.",
"npmUrl": "https://www.npmjs.com/package/validator",
"installCommand": "npm i validator"
}
],
"websites": [],
Expand All @@ -119,6 +218,27 @@
"name": "Roboto 3T",
"description": "Robot 3T is an nice Programm that help You to manage MongoDB local databases on Your machine which ease DB's Manage Process.",
"offecialUrl": "https://robomongo.org/"
},
{
"id": 0,
"modalId": "vscode",
"name": "VS Code",
"description": "The most populer code editor that every developer should used it at least once, It have all features that speed your development process.",
"offecialUrl": "https://code.visualstudio.com/"
},
{
"id": 1,
"modalId": "sublime-text",
"name": "Sublime Text",
"description": "Another nice Code Editor that have nice and great features that will help you in your work as a Programmer.",
"offecialUrl": "https://www.sublimetext.com/"
},
{
"id": 2,
"modalId": "atom",
"name": "Atom",
"description": "Atom is one of my favourite code Editors that I was using it in Starting Journey, It have a lot of features that will speed your work.",
"offecialUrl": "https://atom.io/"
}
]
}
111 changes: 107 additions & 4 deletions src/db/frontend.json
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@
{
"id": 10,
"modalId": "qrcode.react",
"name": "Qrcode React",
"name": "QR Code React",
"description": "Nice Package that used to Create QR Code, It's usage is very simple but have a great benefit.",
"npmUrl": "https://www.npmjs.com/package/qrcode.react",
"installCommand": "npm i qrcode.react"
Expand All @@ -225,16 +225,119 @@
"description": "One of my favourite package that use in this project it give you ability to add code blocks in frontend applications, It support a lot of languages and tens of great themes that make your project looks good.",
"npmUrl": "https://www.npmjs.com/package/react-syntax-highlighter",
"installCommand": "npm i react-syntax-highlighter"
},
{
"id": 12,
"modalId": "framer-motion",
"name": "Framer Motion",
"description": "Nice Library that help you to implement advanced animations in your website, So if you dealing a lot with animations you should use it to ease you work.",
"npmUrl": "https://www.npmjs.com/package/framer-motion",
"offecialUrl": "https://www.framer.com/motion/",
"installCommand": "npm i framer-motion"
},
{
"id": 13,
"modalId": "react-typed",
"name": "React Typed",
"description": "Creat NPM Package that will help you to add Typing Writer Effect, which will add nice feature to your website.",
"npmUrl": "https://www.npmjs.com/package/react-typed",
"installCommand": "npm i react-typed"
},
{
"id": 14,
"modalId": "styled-components",
"name": "Styled Components",
"description": "The best package in my opinion to implement css in js that you can use it in your frontend application.",
"npmUrl": "https://www.npmjs.com/package/styled-components",
"offecialUrl": "https://styled-components.com/",
"installCommand": "npm i styled-components"
},
{
"id": 15,
"modalId": "chart-js-2",
"name": "Chart JS 2",
"description": "Nice npm package that will ease your work with chartjs library if you use React JS.",
"npmUrl": "https://www.npmjs.com/package/react-chartjs-2",
"offecialUrl": "https://react-chartjs-2.js.org/",
"installCommand": "npm i react-chartjs-2"
},
{
"id": 16,
"modalId": "howler",
"name": "Howler",
"description": "Great library that will help you in if you dealing with Audio in your Applications, It have great features and methods that ease Audio handling Process.",
"npmUrl": "https://www.npmjs.com/package/howler",
"offecialUrl": "https://howlerjs.com/",
"installCommand": "npm i howler"
},
{
"id": 17,
"modalId": "lodash",
"name": "Lodash",
"description": "This Library you must use it, It is Great Library that have a lot of functions that will ease your work with javascript..",
"npmUrl": "https://www.npmjs.com/package/lodash",
"offecialUrl": "https://lodash.com/",
"installCommand": "npm i lodash"
}
],
"websites": [
{
"id": 0,
"modalId": "fancy-border-radius-generator",
"name": "Fancy Border Rdaius Generator",
"description": "Awesome website to Create any CSS Border Radius shape shape by Easy way.",
"offecialUrl": "https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"
"description": "Awesome website to Create any CSS Border Radius shapes by Easy way, WHich will speed your development process.",
"offecialUrl": "https://9elements.github.io/fancy-border-radius/"
},
{
"id": 1,
"modalId": "hero-icons",
"name": "Heroicon",
"description": "Nice website that will give you beatiful icons as svg format to implement in your application without installing libraries like Fontawesome.",
"offecialUrl": "https://heroicons.com/"
},
{
"id": 2,
"modalId": "css-gradient-generator",
"name": "CSS Gradient Generator",
"description": "Great Website that help you to make CSS gradients by easy way, which speed your development process.",
"offecialUrl": "https://cssgradient.io/"
},
{
"id": 3,
"modalId": "browser-frame",
"name": "Browser Frame",
"description": "Nice website that help you to put your Images in nice frames like Chrome, Safari and Mozilla Browsers and with different themes Like Dark and Light Theme.",
"offecialUrl": "https://browserframe.com/"
},
{
"id": 4,
"modalId": "getwaves",
"name": "Getwaves",
"description": "Getwaves is great website that will give you svg wave and with different shapes to implement it in your website.",
"offecialUrl": "https://getwaves.io/"
}
],
"programms": []
"programms": [
{
"id": 0,
"modalId": "vscode",
"name": "VS Code",
"description": "The most populer code editor that every developer should used it at least once, It have all features that speed your development process.",
"offecialUrl": "https://code.visualstudio.com/"
},
{
"id": 1,
"modalId": "sublime-text",
"name": "Sublime Text",
"description": "Another nice Code Editor that have nice and great features that will help you in your work as a Programmer.",
"offecialUrl": "https://www.sublimetext.com/"
},
{
"id": 2,
"modalId": "atom",
"name": "Atom",
"description": "Atom is one of my favourite code Editors that I was using it in Starting Journey, It have a lot of features that will speed your work.",
"offecialUrl": "https://atom.io/"
}
]
}
5 changes: 5 additions & 0 deletions src/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,8 @@ a:active {
-ms-user-select: none;
user-select: none;
}

button,
a {
outline: none;
}

1 comment on commit 0189f34

@vercel
Copy link

@vercel vercel bot commented on 0189f34 Jul 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web-guider – ./

web-guider.vercel.app
web-guider-git-main-ahmedmohmd.vercel.app
web-guider-ahmedmohmd.vercel.app

Please sign in to comment.