About The Project
In the summer of 2023, I collaborated with two fellow software development students from Lane Community College to build a website for the Native American Arts and Crafts Market (NAACM) of Eugene. This project was both a learning opportunity and a service to our community. NAACM had no online presence, so we chose to help them reach a wider audience by promoting their monthly market, where Indigenous artists from various tribes showcase and sell their crafts.
Homepage Visual Overview
The homepage is designed to be visually welcoming and informative, drawing visitors into the world of Indigenous artistry. Key sections on the homepage include:
Photo Gallery: Below the cards, a gallery displays vibrant images of past market events, showcasing jewelry, beadwork, textiles, and more. This section creates a sense of the market’s atmosphere, emphasizing the diversity and talent of Indigenous artists.
Hero Image & Navigation: A hero image displays handcrafted jewelry, setting the tone for the market’s artisanal focus. The navigation bar provides easy access to other pages, with a “Join our Newsletter” button to encourage ongoing engagement.
Information Cards: Three cards give a quick overview of NAACM’s mission, vendor information, and event timing. Each card has a clear icon and brief description to guide visitors to what they need.
About Page Overview
The “About” page provides background on NAACM’s mission and history. The Mission section describes the market’s dedication to supporting Native artisans in a space that honors their culture and art. The History section traces NAACM’s origins to its first gathering in 2013, providing context for the market’s evolution. A video player offers a multimedia introduction, and another Stay in Touch! form invites visitors to subscribe to the NAACM newsletter.
Vendors Page Overview
The “Meet Our Vendors” page is a dedicated space to showcase Indigenous artisans featured at NAACM. Key elements include:
Vendor Profiles: Each profile card highlights a vendor’s work and cultural background. Accompanied by high-quality images, the descriptions offer insight into each artist’s inspirations, techniques, and heritage. Social media links encourage further exploration and support for the artisans.
Page Header: An inviting header, “Meet Our Vendors,” sets the stage for exploring the stories behind the artisans.
Developing the Website
In addition to our descriptive approach, below are some examples of the code we wrote for the Native American Arts and Crafts Market (NAACM) website. These snippets illustrate our attention to modern web development practices, including responsive design, modular CSS, and JavaScript-driven interactivity.
We opted for a JavaScript-based approach to develop the site, leveraging modern web development tools and frameworks to create a dynamic and engaging user experience. At the core of our frontend development, we utilized HTML, CSS, and JavaScript, ensuring a solid foundation for the site’s structure, styling, and interactivity. To enhance our CSS capabilities, we incorporated Sass, a powerful CSS preprocessor that allowed us to use variables, nested rules, and mixins for a more modular and maintainable stylesheet.
We structured the website with semantic HTML to ensure that the content is both accessible and well-organized. This foundational approach improves readability and enhances the site’s usability. For example, our use of <section>, <nav>, and <div> elements helped create a logical and intuitive layout.
This structure allowed us to present information in a way that’s accessible across different screen readers and devices, while keeping the code clean and easy to maintain.
Responsive Design with Bootstrap
Bootstrap played a significant role in the responsive design of the NAACM website. By utilizing Bootstrap’s pre-styled components and grid system, we ensured that the website was visually appealing and adaptable to different screen sizes. The col-lg-4 col-md-6 col-sm-12 classes, for example, ensure that each section adjusts based on the user’s device, providing a consistent experience across mobile, tablet, and desktop.
Bootstrap’s responsive grid enabled us to efficiently design a layout that looks polished on all screen sizes, enhancing the accessibility and usability of the site.
This framework was particularly useful for creating a responsive image carousel, navbars, and form elements, which were essential for the site’s functionality.
Webpack Configuration
To manage the assets and ensure efficient development, we configured Webpack with a setup that allowed us to modularize and streamline the site’s resources. Below is an overview of some key elements from our webpack.config.js file.
Entry Points for Each Page
We specified individual entry points for each page in the website, including home, contact, about, vendors, and fashion. Each entry point uses general.js as the base JavaScript file, allowing us to maintain consistency across pages while also keeping them modular for better asset management. By setting entry points this way, we ensured that each page would have its own bundle, which helped optimize loading times:
Output and Asset Management
Our output configuration specifies the dist directory as the build output, with separate bundles for each page. The clean: true option ensures that each build cleans out the old files, preventing clutter in the output directory. Additionally, assetModuleFilename was used to organize images, ensuring that all images are saved to a dedicated directory within dist:
Dev Server and Source Mapping
To enhance the development workflow, we configured the Webpack Dev Server to serve files from the src directory and set it to run on port 3000. We also enabled source mapping with devtool: "source-map", making debugging easier by allowing us to trace issues directly back to the original source code.
Loaders for JavaScript, CSS, and Images
To handle various asset types, we used loaders that enabled us to transpile ES6+ JavaScript with Babel, compile Sass to CSS, and manage image and font assets. This setup allowed us to utilize modern JavaScript features and modular CSS without sacrificing compatibility or performance:
HTML Webpack Plugin for Multi-Page Setup
We used the html-webpack-plugin to create individual HTML files for each page (index.html, contact.html, about.html, vendors.html, and fashion.html). This plugin allowed us to specify chunks to inject for each page, ensuring that each HTML file includes only the necessary JavaScript, which improved load times and reduced resource usage:
Environment Variables with Dotenv and Copy Plugin for Asset Management
For secure handling of environment-specific configurations, we integrated the dotenv-webpack plugin. This enabled us to use environment variables to control deployment settings, making the site adaptable across different environments without exposing sensitive information directly in the codebase.
Finally, the copy-webpack-plugin allowed us to copy static assets (such as images and icons) from the src/assets folder to dist/assets, ensuring all necessary files were included in the final build. This plugin streamlined our deployment process by automating asset management:
Overall, the NAACM project showcases our ability to leverage modern web development technologies to create a comprehensive and responsive website. By integrating tools like Webpack, Babel, Bootstrap, and Sass, we were able to deliver a user-friendly and visually appealing platform that effectively highlights the artistry and talents of Native American and Indigenous creators. This project demonstrates our commitment to utilizing best practices in web development and our proficiency in managing complex projects from conception to deployment.
Let’s put ourselves out there
So, let’s create a website, the possibilities are endless. With out collaboration, let’s go find those sales or views you’re looking for.