How to Add an Engaging Dropdown Menu to Your React Applications

Alden
Alden
Mar 1 · 4 min read

At my last month of Lambda School, I got to work on an intriguing project called Reach LMS. According to the stakeholder:

Reach LMS is an open-source learning management system designed for the developing world. Reach lets organizations offer education and training to anyone — whether they’re working from a laptop in a city center or a solar-charged flip phone in a remote village.

In other words, Reach increases the scope of education and allows people who are less fortunate to access valuable information.

Since there was no code to build off of, my team and I were responsible for building the foundational components and relationships for this system. This involved deciding what types of user roles we would have, what interactions they can have with the application, and how they were all related. This naturally brought up some concerns: how will we make our application responsive enough for a flip phone? What are the available options? How can we build this application so it can be scaled easily in the future?

We Built A Learning Management System in 1 Month

Reach LMS Programs Page

After a month of hard work, we were able to complete a minimal viable product (MVP) that our stakeholder was satisfied with. Our MVP had three user roles: admin, teacher, and student. Each of these roles have increasing permissibility, from a student having the lowest to an admin having the highest. With Reach LMS, companies now have the chance to create programs, courses, and modules. They’ll be able to share their information online and foster a seamless, easy-to-use learning environment.

My main contributions to this project were the frontend side created in React.js. I was responsible for building on the react framework, making multiple components, creating the redux foundation, and handling styling across the entire application. Most of my contributions is to the layout, components, and state management, which is hard to recognize unless you are a software developer. One difficult contribution I made was the dropdown menu on the modules page.

Modules Page with Dropdown Menus

I wanted to display our information in a clean and easy way. With this said, a dropdown menu came to mind. The styling you see here is Ant Design for the forms and Material-UI for the dropdown menu. I was able to implement the dropdown menu smoothly, but ran into a nasty bug where our delete functions were not working properly. I was able to overcome this by communicating with our backend and having them send the updated list after each successful delete. This allowed me to copy the response I received into our local state stored in redux. Overall, we were able to make a dynamic add/delete modules page.

Dropdown Menu Code from Material-UI

Application In Action

As of right now, Reach LMS stands as a fully functional web application available to users who wish to create their own online courses. Admin users will be able to create their own programs, courses, and modules. They will also be able to add teachers and students to each course using interactive dropdown menus on every course page. Here’s a short clip on the UI of a course page:

Reflection and Future Endeavors

From here, we expect another team at Lambda School to pick up our greenfield project and build on what we have. Since we started from nothing, we spent most of our time building the foundation and frameworks of the application and did not have a lot time to devote to features. Some future features I’d like to see are server-side rendering + offline management, email signup, file and video upload options, and student submission management. Some technical challenges I see are scaling this application as its userbase grows and finding ways to maintain efficient run times. We built it with scaling in mind but the memory issues are inevitable. My peers and instructors at Lambda school all liked our project and praised it highly. I for one really enjoyed working with my team and am incredibly proud of what we shipped. I hope this project helps me land my first job as a software engineer and gives me the chance to continue working on cool applications which benefit others.

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store