WCA HUB

 

WCA HUB

ALX SOFTWARE ENGINEERING

FOUNDATION PROGRAM PROJECT PORTFOLIO

Project Web page: https://wca-hub.onrender.com


Application Screenshots

Figure 1.1: Screenshot Application Home Page

Figure 1.2: Screenshot of Application About page


Purpose of the Project

Team Members Role and Timeline

Wummy Kaseem: Preparing project landing page, writing blog post, managing project whiteboard, User authentication and authorization methodology.

Celestinah Odebunmi: Preparing the Readme file, Create presentation slide, Database design and testing of project demo.

Abdulbasit Abdulganiyu: Front-end user interface design (using html, css and javascript), back-end application development (using node js and mongodb), data validation, error handling and preparing the application program virtual environment.

Who the Project is Created For

The project is created so that student and researchers can easily download and upload research projects for academic purposes such that there will be a continuity in those projects and encourage collaboration.

Personal Focus

To be able to develop and integrate the applicability of front-end and back-end side of software development which I long wished for by building an application from scratch and host it to a domain and to serve it purpose.

Also, this project will serve as a basic and a prove of understanding with regards to the ALX Software Engineering foundation program I am currently under studying and as a requirement to go further with the specialization phase of the program.

Why Choose to Work on this Project

Well, as educationist and a student (learning never ends till death), getting access to research and project files is kind of hectic and a lot of manual process has to be undergo to have access in public institutions and research facilities. With the help of this hub, it is intended to make access to such files seamless and encourage continuity of such project and research.

Accomplishment with the Project

Architecture: the architecture of the project is best explain using the diagram below:

Figure 3: Architecture of the Project App

Client: From figure 3 above, the client section include user’s mobile browser, web browser or any other interface that the user can access the project app. The user device can be a mobile phone, a desktop pc or laptop, which sends a request to the server using ISO layer protocols, so as to be able to access the content of the app available or stored on the web server system. If the page or the app is available, the server on the other hand grants the request and then the user will now be able to view the available page and content of the application.

Server: a server is any device that provides service and functions to other devices and most times serves as a storage unit. A web server can be a physical machine that hosts one or more websites, or a software program that runs on a machine and listens for incoming requests. Some common web server software are Apache, Nginx, IIS, etc.

A web server can serve static content or dynamic content. Static content is pre-existing files that are stored on the server and sent it to the client upon request. Dynamic content is generated on the fly by another program (such as a web application) that communicates with the web server and provides the content to be delivered to the client.

An application server can serve different types of applications, such as web applications, mobile applications, desktop applications, etc. Depending on the type of application, an application server can use different technologies to deliver the content or service to the client.

The file system on the other hand, defines how files are named, stored and retrieved from the storage media and device. It keeps track of the date file was created, date modified, access permission, user id of the file creator, file size.

Business Layer: this consist of the application server and file system, where the application server is a software program that provides the business logic or functionality of an application (layer 7). An application server can run on a web server or a separate machine, and it communicates with the web server and the database server to process dynamic requests from clients. An application server can support various programming languages, frameworks, and protocols to develop and deploy applications. Some common application servers are Jakarta EE (formerly Java EE), .NET, PHP, etc. An application server can also provide features such as clustering, fail-over, load-balancing, security, and performance optimization.

Data Layer: this is most times and external system that provide the functionality of storing user data, files and other objects generated by the application. Depending on the databases model adopted,

Summarizing the Technology

This web application project was developed using front-end and back-end software development, this separation of concerns allows developers to work on individual parts of an application without affecting others such that a change in database schema should not affect the frontend code as long as the back-end API remains consistent.

Front-end

The front-end also known as the client-side, is what users interact with directly. It is everything the user sees and interacts with on their web browser. This includes the structure (HTML), styling (CSS), and interactivity (JavaScript) of the website.

HTML (HyperText Markup Language): This is used to create the basic structure of web pages. It defines elements like headings, paragraphs, links, and more.

CSS (Cascading Style Sheets): This is used for styling the HTML elements. It controls how the website looks in terms of layout, colors, fonts, etc.

JavaScript: This is used to make the website interactive. It can manipulate both HTML and CSS, and can also fetch data from the back-end to update the web page without refreshing it (a technique called AJAX).

Back-end:

On the other hand, the back-end also known as the server-side, handles everything that users don’t see. It involves servers, databases, and server-side programming. In this case, this is where Node.js and MongoDB come in and are been utilized in the project development.

Node.js: This is a JavaScript runtime built on Chrome’s V8 JavaScript engine. It allows you to run JavaScript on your server. With Node.js, you can build scalable network applications and handle multiple simultaneous client connections efficiently.

In a typical Node.js web app:

  1. The user interacts with the frontend in their browser.

  2. The frontend sends a request to the back-end (Node.js server) based on user interaction.

  3. The back-end processes this request — it may involve CRUD operations (Create, Read, Update, Delete) with a MongoDB database.

  4. The back-end sends a response back to the frontend.

  5. The frontend updates accordingly based on this response.

MongoDB: This is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

Application Features Overview

  • HTML pages

  • user login: sign-in and sign-up

  • Ability to upload and download project files

  • Ability to search for a specific uploaded file

  • Getting author’s information for collaboration purpose

    Most Difficult Technical Challenge

At first, the project was intended to be developed using python flask for the application program interface (api) and route the html pages, MySQL Alchemy for the database storage while at the design and development stage. For collaborative purpose, the program is written in a virtual environment while installing all the need packages and dependencies for easy access by teams members.

With the help of integrated Development Environment (IDE)/ text editor (Visual Studio Code) for creating a virtual environment and installing all packages and dependencies, using app.py file which contains the python flask code to route the html pages and also send/ retrieve users inputs from the database.

To be able to create a database and store user data, the necessary packages and linking has to be done, which we did, then on the python flask environment during the developmental stage, db.create_all() function has to be run so that the database for all input and functions can be created while running the app. But unfortunately this particular command refuse to execute even after changing to python and flask command prompt several times.

So because of the above, we had to change and use node js for request and response rendering to and fro the client and server side of the application. And due to this, the development period of the application program takes longer than expected.

Technical Take-away

Software programming complex, fun and a gradual process, one needs to have a keen interest in it, be confident and ready to accept challenges, undergo sleepless nights and readily willing to sacrifice.

Having a realistic idea is very important while choosing, building and developing a web or mobile application. This must be something that can be beneficial by oneself or a great number of people, such that while in the developmental stage, one will be motivated to continue and face any challenge squarely even with or without external encouragement by peers and close contacts.

There are so many people out there, mentors, documentations and communities available when one need clarification or an approach to particular syntax on how to use a specific functions, modules and packages for any programming language out there.

And also, with the invention of AI chatbot such as ChatGPT, bing chat, google bard and others, one can easily be guided and get solutions on the correct syntax and structure of a code base problem when properly laid down to these chatbots.

What Might be done Differently

With respect to this app, grouping of research projects based on field of study and either as a research or journal is highly recommended, so that there will be accuracy which searching a particular research projects in a very short possible time from the database.

About me

I am Abdulbasit Abdulganiyu, with first degree in Electronics & Telecommunication Engineering and second degree in Machatronics & Systems Engineering. I am good with electrical and other hardware installations. I like reading, watching movies and passion for automation and software development.

Github profile: https://github.com/lanre2nite/wca-hub

Link to deployed project page: https://wca-hub.onrender.com

Project landing page: https://github.com/Wummysoft/wca-hub

LinkedIn Profile Link: https://www.linkedin.com/in/abdulbasit-abdulganiyu-4b0166138



Comments

Post a Comment