How I Built My Own Open Source Project
I have been a web developer, mostly on client side implementation, for sometime but never built my own project that I can show off. Always worked on existing projects to maintain and add new features and fix bugs.
Finally, I decided to make something as I have plenty of time lately and make it available as open source. For that reason I decided to implement already existing project i.e. employees set their vacation time before they go on vacation.
I called this project TimeOff. I will explain the process of developing this project from scratch. In order to start, I had only the concept in my mind but no design. I knew which list of sections I need in my project. Below are the ones I went for:
- Authentication
- Admin
- Employees
Authentication is the part where user can login to the system that by providing their credentials. Below is the screenshot of the login page.
As you can see the above page very simple in both design and usage. Under the hood it uses JWT authentication with RESTful API.
Before I get into the employee section, I will describe the admin section which is slightly complicated than employee with more sub sections.
- Authentication
- Admin
- Employees
Admin will see that same login screen pointed above for employees. To decide which user is admin and which is employee happens on server side which I get in to later in this blog.
Once the admin is logged in, they have the luxury to see the dashboard list of employees and add new employees and have full control over employees’ accounts. Below is the sample screenshot that will be presented to admin upon login.
As it can be seen that it is very minimalistic dashboard with very basic details. The slight complicated part is the recent activities section which is in realty not that complicated as you will see in many other projects you might have used or developed.
There is a navigation which can be used to navigate around different sections for admin.
- Authentication
- Admin
- Employees
Employees which is the third section i.e. when employee logs in. Again very minimal and very basic page. Simple navigation between Home and Profile. On home page, employees can set their vacation, view them and delete them.
On profile page, they can see their basic profile details such as their name, username, role etc. On this page they have the luxury to edit their details/profile.
Employees should also have an email into this project however, I omitted that for now. As this is an open source project and any company that want to integrate this project in their company are free and modify and even any contribution to this project is very welcomed.
Below is a sample screenshot the employees’ see when they login.
Again very simple and minimal home page. All the contents in above screen shots are mock data so it has nothing to do with real employee. Second, as you can see there is no employee’s name mentioned since this project is still work in progress as I mentioned above and hopefully you will see some differences by the time you read this blog as published.
Above are the three sections of this project. Now it is time for some technical part of this project.
In order to implement this project, I chose the list of technologies I am already aware of and used it in the past as I wanted this to finish ASAP and release it to public and see the results how it goes.
Those technologies are below:
- Node.js & Express.js
- MongoDB
- React, Redux & Redux Saga
1.Node.js & Express.js
Since I went on and decided to use full stack JavaScript and for server side it is Node.js with Express.js. The basic architecture for this project could be found on below link:
https://github.com/zafar-saleem/NodeScalableArchitecture
Above project is a boilerplate on How to write node.js server that scales. I wrote a blog on this on how to write such architecture in Node.js. If you like reading click above link to learn more or if you are more in reading codes and follow it then feel free to clone repository.
2. MongoDB
For database to store data, I used the most popular MongoDB database. This is a common choice for most of the people that go with Node.js. I am no exception.
Mongoose which is express.js middleware for MongoDB that I am using to implement its schemas and access them.
The entire architecture of the server side is based on RESTful API with JWT authentication system.
Below is the screenshot of how the entire list of folders are structured.
The server side project folder is based on controllers, models, routes and services.
Controllers are the one with API endpoints which I import in routes with current version of API. Controllers call its respective services functions in services folder.
3. React, Redux & Redux Saga
On the client side implementation, I went on using React, Redux and Redux Saga. React is a very popular JavaScript framework that follows and promotes component based development.
Redux is a state management library which sits well with React and Redux Saga allows to make async requests to interact with REST API end points.
For the architecture part, I already had the boilerplate code for this on below link:
https://github.com/zafar-saleem/react-login
I wrote a blog on above boilerplate which can be found here. Please go ahead and read the blog and/or clone the repository to play around with it.
There are some differences though with above boilerplate and with TimeOff project. That is, I used the most recent version of routing which is react-router-dom or version 4 than 3 which I used in above boilerplate code.
Above are a couple of screen shots how my client side project folders look like. The components folder consists of all the list of components which is subdivided into admin, employees, authentication and commons. Reducers, actions and store are concept of Redux to manage this project state at project level.
Sagas folder has the concept of Redux Saga which is kind of middle layer between our components and services(which makes ajax requests to server).
Design
When I thought about this project, I had no real design in my mind. I started implementing this project by implementing its logical part both on client and server sides. Once I reached to the point where I thought it is time to see how is it going to look like in design.
Then I went on and opened photoshop and begin designing some very basic layout and after keep playing with it for some hours I came up with the design mentioned on link below.
The entire design of this project is completely open sourced and can be found on my uplab profile link below:
https://www.uplabs.com/zsaleem
So above is a basic description of my entire project from how I started it and end up here. In addition, this is a very good practical example of my previous blogs i.e. writing scalable server in nodejs and user authentication in react.
After getting TimeOff done, I went on and created facebook page and twitter account. Go ahead and like its facebook page and follow on twitter.
If you would like to see the entire project, please go ahead and clone both the server side and client side from my github profile or links below:
https://github.com/zafar-saleem/app
https://github.com/zafar-saleem/server
I hope you liked this blog, if you do then go ahead give it a clap and share it.
