Welcome to my open-source JS (and .Net) projects

My role as a developer focuses on back-end development, where I am currently working on designing a RESTful API using a combination of frameworks and tools such as .Net, ExpressJS, MongoDB, Swagger, and so on.

Although back-end development is my primary area of expertise, I also have a special interest in front-end design. From time to time, I enjoy creating vanilla JS pages, as I find it to be a fun and engaging way to express my creativity. While frameworks like Angular and ReactJS is currently a more popular tools for front-end development, I prefer to share my thoughts on vanilla JS on this page. I believe that it is an easier and more accessible way to understand and share my ideas with others.

I hope my projects could be helpful and interesting, and I am looking forward to give your feedbacks and experiences as well.

The following is a list of pages that I developed:

1. Web development projects

Here I want to introduce the new open-source projects that I developed.

### CSite back-end using .Net 6: I utilized modern technologies to develop my first full open-source back-end project, which I also incorporated into my teaching. Below are the main technologies that I employed:

• Build data-driven RESTful API
• Using MS SQL server database and Entity framework
• Using Unit of Work
• Exception handler and response wrapper using AutoWrapper
• Generic controllers and dependency injection
• Managing controllers using helper
• Logging with Serilog
• API documentation using SwaggerUI
• Authentication and authorization using IdentityServer4
• Using DTOs and Authomapper
• Versioning
• for more information, please see CSite Backend project.

CSite front-end using Angular

This is the first Angular project that I have created and made publicly available as an open-source project. This project is designed to interface with the CSite Backend project, so users will need to have sufficient knowledge to run both the .NET 6 backend and Angular user interface in order to utilize these projects, which are currently under construction.

for more information, please see CSite Frontend project.

2. Pages

• Matrix effect:This project is among my favorites. You might recall the iconic machine code effect used in the Matrix movies - this project features a fully optimized animated background that mimics Matrix effect. While I didn’t create the code myself, I did work on its development and optimization to closely resemble the effect used in the movies.
• Flight booking demo: a responsive web page to search, book and manage international flight tickets (more information).
• Business webpage demo: a classical web page suitable for business plans. This page is responsive and has a bunch of visual effects, such as a theme changer. It is worthy to note that all effects have been implemented manually, which boosts performance (more information).
• Mosaic art gallery demo: this image photo gallery is fully responsive, uses a new features of vanilla JS to make much more interesting image grids album, and adapts to the browser using a nice and smooth animation (more information).

• Nastaligh (SVG artwork): it is interesting to work with SVG files and learn how to add some effects to those files. On this page, you can see I added gradient color and shadow to an SVG artwork, and it will change whenever the mouse hover or enter its area.

• (in process)

3. Charts

• Heatmap demo: This is a user-friendly and responsive project that allows for the creation of heatmap charts with resolutions ranging from 10x10 to 80x80 pixels. Notably, no libraries were used in its implementation. Instead, the CSS blur effect was employed to generate smooth results even at higher resolutions, thereby enhancing performance. (more information).
• (in process)

4. Games

• Roll dice game: a simple dice game; whoever can get the most score wins!
• XO game manually: a responsive XO game where two users can play with each other.
• XO game wth CPU: it has a simple JS code to make it possible that the CPU plays with human.
• (in process)

Source code

You can access the source codes from this link.

Get in touch with me by a.norollah.official@gmail.com

License

JS-code is licensed under the MIT license.