thecyberworld/thecyberhub-app

Thecyberhub app of @thecyberworld community

TheCyberHUB

👨‍💻 Website link: TheCyberHUB

Development Website link: TheCyberHUB Dev

Table of contents 💻

• Title
• 🤖 Installation Guidelines
  • 👇 Prerequisites
  • 🛠️ Installation Steps
• 👨‍💻 Contributing
• 🛡️ License
• 🙏 Support
• 📨 Contact US

---

🤖 Installation Guidelines

👇 Prerequisites

Before installation, please make sure you have already installed the following tools:

• Git
• Nodejs

🛠 Installation Steps

1. Fork the repository
2. Clone the forked project
3. Navigate to the cloned project directory
4. Move to the dev branch: git checkout dev
5. Install the dependencies with npm i
6. Create a .env file in the root directory of the project
7. Copy the contents of example.env to .env file
8. Run npm run dev to start the server
9. Open the browser to visit the website at http://localhost:3000/

If you are new to Git and GitHub, then must check out first-contribution repository first and contribute to it before you contributing to other open-source projects.

---

👨‍💻 Contributing

• Contributions make the open source community such an amazing place to learn, inspire, and create.
• Any contributions you make are truly appreciated.
• Check out our contribution guidelines for more information.

---

🛡 License

thecyberhub.org is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Support

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️

---

📨 Follow / Contact Us

Back to top 🖱

thecyberhub-app's Issues

[FEATURE] Add Blogs page

Detailed description

We have to build a page like this(excluding hamburger icon)

Context

Website: https://www.thecyberhub.org/blogs
React Sourcecode: https://github.com/thecyberworld/thecyberhub.org

Possible implementation

If you need any help or have any doubts, let us know below.

Thank you.

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Build simple quizz app

Detailed description

We have to build a simple quiz app in react-native.

Example:

Context

React SourceCode: https://github.com/thecyberworld/thecyberhub.org
Website link: https://thecyberhub.org/prep/quiz

Possible implementation

If you need any help or have any doubts, ley us know.

Thank you.

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Broken link of CONTRIBUTING.md

Describe the bug

In the main branch, Inside the Readme.md the 'contribution guidelines' link is broken , the file CONTRIBUTING.md is missing in the main branch.

To Reproduce

1. Go to the link https://github.com/thecyberworld/thecyberhub-app/#-contributing
2. click on contribution guidelines

Expected Behavior

It should open the 'CONTRIBUTING.md' file.

Screenshot/ Video

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Jobs/Internships page

Detailed description

For example, what we trying to build:

This is a react native project
We have to make the same page like this on this project

Context

The jobs page will be going to help community members and other users

Possible implementation

tech-stack: react and styled-components or CSS

Additional information

If you need any help or have any doubts, let us know.

Thanks.

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE for Developers] Configure ESlint and Prettier

Detailed description

Need to configure ESlint and Prettier as in the "TheCyberHUB" project , for better development experience

Context

I noticed that in some parts the indentation is not readable so we need to configure Prettier to make the same structure for all the developers.
ESlint is to make the developers be persistent under its rules

Possible implementation

Add the packages and files , can be copied from "TheCyberHUB" or configured from scratch

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Community page (separate page)

Detailed description

We have to build a community page.

• A little bit about community
• Discord link

This is a react native project
We have to make the same page like this on this project

Context

The community page will help user to know more about the community
and will be able to join the community through the community page.

Possible implementation

Example page:

Additional information

If you need any help or have any doubts, can ask below.
Thanks

Code of Conduct

• I agree to follow this project's Code of Conduct

Settings page

Detailed description

Settings page containing dark mode switch, feedback and help section

Context

Settings page containing dark mode switch, feedback and help section

Possible implementation

No response

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Add Splash Screen and App Logo

Detailed description

the App schould have a proper splash screen and logo added

Context

basic setup

Possible implementation

using the cyberworld logo

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Add Roadmap Screen

Detailed description

We need to add Roadmap Screen in react-native, which will be reached when the user click the Resources tab.

Example:

Context

React SourceCode: https://github.com/thecyberworld/TheCyberHUB
Website links:
https://www.thecyberhub.org/roadmaps
https://www.thecyberhub.org/roadmaps/cyber-security-beginner

Possible implementation

@kabir0x23 Do you want me to do it in similar way as the design and functionality in the thecyberhub website?

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Add courses page

Detailed description

example link: https://www.thecyberhub.org/resources/courses

Context

This is a react native project
We have to make the same page like this

sourcecode: https://github.com/thecyberworld/thecyberhub.org

Possible implementation

No response

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[BUG] Taking time to load background image/video

Describe the bug

When the app launches it takes time to load the the background image
Like somewhat 1-2 sec. (after splashscreen)

after that main screen loads

To Reproduce

open the app, wait and watch

Expected Behavior

No response

Screenshot/ Video

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Code Linting

Detailed description

The Codebase is pretty Raw at this point.
To make onboarding and contributing easier, lint rules and maybe a prettier setup are recommended

Context

easiier to contribute.
no need for maintainers to force specific code styles in commentary -> can be handled by repo

Possible implementation

esLint, Prettier

maybe tsconfig?

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Create Events page (same like blogs)

Detailed description

We have to build an event page like this

Context

Website: https://www.thecyberhub.org/events
React Sourcecode: https://github.com/thecyberworld/thecyberhub.org

Possible implementation

If you need any help or have any doubts, let us know below.

Thank you.

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] add simple Homepage

Thecyberhub-app is a react-native app

We have to build the same home page

Here is our home screen:

and we want to this exactly same on our home screen

website link https://www.thecyberhub.org/
website source code is also available on the GitHub

If you need any help or having doubts, let us know:

Thanks

Style System

Detailed description

The following PR proposes the implementation of a simple style system for the app.

Context

Future contributors can reference this system all over the app for uniformity in styles.

Possible implementation

#5 already introduces the style system.

Additional information

Happy to discuss changes to colors etc.

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE] Missing Features on this app, based on TheCyberHUB.org website

Detailed description

We have to create issues based on missing features/functions on this app based on TheCyberHUB.org

Simple Example: Interview questions - https://www.thecyberhub.org/interviewQuestions

Context

This feature is missing in the App, so we have to create this issue like this.

in simple we are building a mobile app based on thecyberhub.org

complete source code: https://github.com/thecyberworld/thecyberhub of website

Possible implementation

No response

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[OTHER] Add TypeScript Or Use Only JavaScript

What would you like to share?

There is an important question if you would like to use ts in the project or not. Some configurations of ESlint and so on depends on this question . In my opinion, it is confusing that the project uses both.

Additional information

Pros of using TypeScript:

• Improve Code Quality and Refactoring
• Enhanced Productivity with Codebase Documentation

Cons of using TypeScript:

• It consumes development time
• Some big libraries and frameworks started remove it from the source code for example : Svelte, Turbo 8 . So the future of typescript for this days is unclear.

Code of Conduct

• I agree to follow this project's Code of Conduct