Givesudan began as an initiative in 2024 this initiative was launched by a dedicated group of individuals and content creators who recognized the urgent need for coordinated efforts to alleviate the suffering and promote recovery in sudan.

[Demo](https://www.givesudan.org)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbmKt3of7p4SCSyifNpQk5g8tFN93%2Fgivesudan%2Fd66cbd71-cf01-4fa7-9061-64054ff68293.png?alt=media&token=26c5751c-4ba0-476c-87b3-96b9db6e8944","id":"d66cbd71-cf01-4fa7-9061-64054ff68293","width":1200,"height":900,"filename":"276shots_so.png","type":"image/png","caption":"","border":false}]}
```

### Challenges

The main challenge was building a platform that balances function and appearance. I needed to use both front-end and back-end technologies effectively.

By applying responsive design, I made sure the platform works well on different devices, improving user experience (UX) and user interface (UI).

Adding animations was important, so I used JavaScript and CSS transitions to create appealing visuals while ensuring the platform runs smoothly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbmKt3of7p4SCSyifNpQk5g8tFN93%2Fgivesudan%2F4eeff97b-953c-4c5a-815b-8d65cc112bed.png?alt=media&token=a748001c-930f-4864-84da-9e4ad8a1d856","id":"4eeff97b-953c-4c5a-815b-8d65cc112bed","width":1200,"height":900,"filename":"328shots_so.png","type":"image/png","caption":"","border":false}]}
```

For processing donations, I chose GoFundMe as the main solution. By tackling these technical issues, I created a strong platform that meets my client's expectations and serves its purpose effectively.

Givesudan overview

I created this project as part of my application for the Web Development Intern position at UNDP. The idea was to turn the internship description into a live website. I used Drupal CMS to build the site, Docker for containerization, and Heroku for deployment for this project. I also set up CI/CD pipelines to automate everything.

[Github Repo](https://github.com/SoufianeJm/undp-v2)

[Internship post](https://www.impactpool.org/jobs/1119442)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbmKt3of7p4SCSyifNpQk5g8tFN93%2FDP1EC1fcZowWUYzHTTQU%2Fc056b4bd-ed91-4764-983b-957b99be7479.png?alt=media&token=b8c6d624-b4a3-4682-8c7a-e7547e4e0bfe","id":"c056b4bd-ed91-4764-983b-957b99be7479","width":1920,"height":1440,"filename":"257_1x_shots_so.png","type":"image/png","caption":"","border":false}]}
```

In this project, I showcased my skills in managing complex web development tasks, using DevOps practices, and creating a solid, scalable solution for a global organization like UNDP. By including essential features like content management, responsive design, and security, I've made a platform that's easy to maintain, secure, and ready for future enhancements.

---

## **Challenges**

### 1 - Learning Drupal from Scratch

One of the biggest challenges I faced during this project was that, even though I was familiar with popular web development stacks, Drupal wasn’t one of them. I had to start learning Drupal from scratch, which was a bit overwhelming at first. But after a few days of dedicated study and practice, I managed to set up my very first Drupal project.

### 2 - Dockerizing the Project

The next challenge I ran into was dockerizing the project. Trying to get Heroku, Docker, and Drupal all working together was challenging. I faced many errors and wasn’t really sure what to do next. After researching more about the issue, I discovered Wodby, which offers a pre-configured Docker image for Drupal. Using this image, I was finally able to deploy my project on Heroku.

### 3 - Customizing the Olivero Theme

I encountered another challenge when I needed to customize the default Olivero theme in Drupal. The process wasn't as easy as I expected. After further research, I discovered Asset Injector, a Drupal module that enables users to inject custom CSS into the template. With this tool, I was able to finally personalize the theme exactly as I needed.

---

UNDP Web Development Internship Application

Nourjam is a catering business that offers services for weddings, corporate events, parties of all sizes, and other special occasions. When Nourjam approached me, they were seeking a website to showcase their work and enable customers to make reservations easily.

[Demo](http://www.nourjam.be)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbmKt3of7p4SCSyifNpQk5g8tFN93%2Fr88LY4zYN5PTwFFsuxXb%2Ff1957c8d-0998-43f6-86f4-c62de9e094c9.png?alt=media&token=cee0a970-89fd-4c22-9624-388f7f3482a5","id":"f1957c8d-0998-43f6-86f4-c62de9e094c9","width":1920,"height":1440,"filename":"578_1x_shots_so.png","type":"image/png","caption":"","border":false}]}
```

### **Challenges**

This project showcases the catering services that the business offers. I had to make sure that the website was visually appealing and easy to navigate. I also had to make sure that the website was responsive and could be viewed on different devices.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbmKt3of7p4SCSyifNpQk5g8tFN93%2Fr88LY4zYN5PTwFFsuxXb%2F72769186-ef93-4217-9244-418a2a0d4cb8.png?alt=media&token=9be5a98c-72a5-4116-806f-e4deb9ac8257","id":"72769186-ef93-4217-9244-418a2a0d4cb8","width":1920,"height":1440,"filename":"611_1x_shots_so.png","type":"image/png","caption":"","border":false}]}
```