DevHub is aimed to be the search engine of technical links for nerds (like myself :). The plan is to build a website (and mobile) with a list of technical links indexed and weighted by popularity and value. You can search, share and communicate around the link.
Also, the whole development process of DevHub will be open-sourced and shared via YouTube videos and articles. Anyone can join and be a part of the project.
Since DevHub is not planned to be just a demo website but a valuable tool for developers, I believe that it will help [newbie] developers from around the world to see the whole software development process in the example of real-world application and also be the first users of it.
Shortly, the tech stack is as following: Golang for backend including data crawlers and data processing, Python for API and communication, React for the web and React Native for mobile (iOS and Android).
In this particular article, I will explain (mostly to myself :) how to structure a project with different parts in different programming languages and frameworks.
Most of the questions about tech stack are related to the selection of these 3 languages. People wondering why 3 and why exactly these 3.
The answer is pretty simple: for learning and teaching purposes.
Sharing (teaching) part: No secret that these 3 languages are always in trends for the last few years. Hence, it is also interesting for my audience. And you can do a lot of interesting stuff by using them and related technologies (like API development with Python, CLI tools with Go or testing with Jest). So, that’s my hope that we can have fun with these technologies.
From the perspective of high-level design, project DevHub will consist of the following parts:
- Data Layer
- API Layer
- Front-end Layer
Data layer is responsible for the following tasks:
- Retrieve data from an external source
- Process data based on the following aspects:
- Indexing based on title and content
- Rank based on source and references
API layer is responsible for the communication between the data layer and front-end layer. It also includes user authentication and management. Example of API endpoints:
Front-end layer is a collection of front-end applications which expose functionality to end-users. By end-users we understand:
- Internal tools for monitoring and management
- External users (let’s call them customers) of the application(s)
Also, there are will be a lot of tooling and infrastructure configuration. Like Docker and Docker Compose for containers, Kubernetes for deployments, metrics, logs, etc, etc.
Basic user flow looks like the following:
- A user enters the website: https://devhub.codervlogger.com/
- A user gets to the list page where he/she can:
- see an ordered list of the recently processed links
- search for a keyword or term
- click on the particular link to get to the details page
- On details page, user can:
- read the whole article
- leave a comment
- recommend it
- share it
- see list of the similar links
devhub-be- back-end (spiders, parsers, indexer)
devhub-be-api- RESTful API layer for back-end
devhub-fe- front-end (generic placeholder, later shared components)
devhub-fe-web- front-end (React for web application)
devhub-fe-mobile- front-end (React Native for iOS and Android)
The current structure of the repository looks like this:
devhub: # git root directory |-devhub-be # container for back-end |-devhub # go project |-devhub-fe-web # container for front-end web |-devhub # react project |-devhub-fe-mobile # container for front-end mobile |-devhub # expo/react native project
As you can see for each technology we have devhub as a root folder. This is done to keep naming (and at some point namespace) consistent. More on this we will discuss in our upcoming articles.
Checkout Wiki of DevHub repository for detailed information on the features of Version 1.