My journey with BMoreClean: Mercedes Williams

Mercedes WilliamsMy name is Mercedes Williams and I am a Junior at Coppin State University. I joined the BmoreClean project, previously known as Keep Clean, in 2017 with students who are now alumni. The experience was amazing because we got to present BMoreClean to members and other stakeholders of the Baltimore City Government. Nonso, an alumni member, and I were able to discuss why BMoreClean was created and how it could benefit Baltimore.

I have been working on BMoreClean as the front-end developer. I was responsible for how the web page should be viewed by web users. I had to decide what colors to use. There was a lot of changes of the color using CSS or I would change the color of the font within HTML. There are many things I got to learn throughout this project such as using scrim and learning to use PHP to create a contact form. There were many trial and errors using PHP I even tried to go through the route of PHP mailer, which was more challenging than I though. I changed the background at least three times so that there could be some understanding the purpose of BMoreClean.

Using scrim was not as difficult as it may have seemed, I will admit I did have a small issue with adjusting the size so that all of the content could fit within it, however once I figured it out, scrim enhanced the visual aspects of the page. Scrim was used to overlay text on the home page as well as the about page. I was also tasked with embedding the videos on the page, I had no difficulties with that at all. Working on the team page to separate the alumni and the current team members was a bit fun to learn and explore, and when I got them to separate easily it gave me a feeling of accomplishments. I  worked on creating the tabs, adding the color, the background and the content of the pages and giving the end user the chance to visually see what BMoreClean is about. I also figured out why the navigation bar was transparent until the user scrolled down, of course to figure out some of my problems I would ‘inspect’ the web page to find errors and then correct them. The project has been exciting to do from when I very first started until now.

We will conduct a campus-wide testing of the app and the website when we return in the Fall 2020 semester.

The first error I ran into was using PHP

The PHP code Error.

Environment: I used Brackets, but used Google Chrome web browser to preview the work I had done.

Steps to Reproduce: I watched multiple videos to get an understanding of using PHP to create a contact form.

Expected Result: There would be a display depending on if the message was sent successfully or unsuccessfully. It should not reload without displaying either of those messages.

Actual Result: The contact form works successfully and inquires do go to the designated email for support. Displays The proper messages when needed to. Submit button works excellently and the sent message displays.

Severity/Priority: Having a contact form that works successfully is crucial to have for end users to use for questions, concerns, or a reason to reach out to communicate with members of BMoreClean.

#BMoreClean: My Journey Towards First Web App – Sagar Acharya


My name is Sagar Acharya, I am a Computer Science major senior at Coppin State University. BMoreClean is

Using technology (web and mobile app), our project enables residents and pedestrians to help keep Baltimore City clean. clean, previously known as KeepClean, specifically helps track and raise awareness of litter. Litter is the trash that does not make it into public trash cans. Baltimore city refers to these public trash cans as ‘Pedestrian Litter Receptacles’ (PLRs).”

I had joined the BMoreClean project in the Middle of 2019 and the rest of the year was invested in planning and brainstorming the application development plan. The application development started in late December 2019. Prince Me(Sagar) and Mercedes form the team and split the work. I had worked on most of the Server Side(backend). For the web app, we have used PHP and MySQL as our backend and HTML, JavaScript for frontend. The frontend design is handled by prince Web Backend is implemented by me to connect to the database fetch and get a request from the server. I had some experience in MYSQL which makes the SQL part easier to implement. PHP is completely new for me; the development is learning and improving the experience for me. There are very few times where I have a hard time to implement a few things on the PHP server. Implementing the camera on the user side is a great learning experience, I have changed the implementation 3 times. 

The first implementation works fine for the computer browser although it failed for some phones which force me to look for the new implementation. The second implementation was slick, and it works on all the devices we have. After finalizing the implementation, I figured out later that we missed the camera switch button for the front and the back camera. Again, after some Trial and Error, I was able to implement the code for the font and the back camera. This time I have looked into AOSP(Android Open Source Project) repo for the full proof implementation for android. I don’t have any IOS devices to test on at the time of writing. The camera implementation work by accessing the camera and drawing the captured image as canvas and preview to the user. Then the captured canvas is fetched to the server after the user clicks on upload.


The First Camera Bug Was

Camera Switcher for Front and Back Camera.


Web Browser Android based on the chromium And Firefox Browser.

Steps to reproduce

I was working most of the time on the desktop browser to test and debug my code. My laptop has only one webcam, so the emulated mobile environment shows the camera which is available. The phone browser seems to select the camera based on the phone Manufacturer and browser. On some phones the app uses the back and on some it uses the front camera.

Expected Result

Almost every phone has 2 cameras, so we need to have the camera switch to change the camera from front to the rear.

Actual Result

The app needs some way to switch the camera from front to back or vice versa. Although I forget to implement a Button to switch the Camera.



This is the serious problem for those phones which front camera open by default. That makes the problem for the user to capture picture as we need the back camera by default.

 NOTE:  We will have a campus-wide test phase of the project’s website and of the app during the Fall 2020 semester to get feedback.