Welcome to PacWest's November + December + January Coding Challenge!

The purpose of PacWest's monthly Coding Challenge is to create a constant opportunity for developers to upskill their coding abilities, cultivate accomplishments to reference during role discussions, and build SWE community engagement through fun and captivating projects.

---

💻 We recommend you attempt the Full Stack challenge, but you can select the steps that best suits your commitment level. You do not have to complete every step of the challenge to earn points.

🎯 At the end of each month, each submission's points will be tallied by the PacWest team. Participants who show exceptional work in either a Full Stack, Frontend, or Backend capacity will be recognized in SWE's Monthly CoreTech meeting and the Coding Challenge SharePoint

🏆 Points are tallied on a continuous basis. The top five participants will be listed in the Coding Challenge leaderboard.

💫 Remember: this is a time to challenge yourself, try out new tech, and have fun!

📧 Once completed, please submit your repository to pacwest@avanade.com. We will then send you a reflection form to fill out.

---

To get started: fork this repository and follow the steps listed below

---

Instructions

Choose either either the Frontend or Backend routes and follow the given steps.

For the Full Stack challenge, complete both routes in conjunction!

🌲 Click here to utilize the National Parks API 🌲

Note: If you would prefer to start with the National Park API, please do! We provide a JSON as starter data, but it is not a requirement to use.

Frontend Challenge	Backend Challenge
Challenge 1 100 Points Create a working frontend webpage with React and Next.js. To complete the first step of the frontend challenge, you must complete the following steps in the Next.js - Create Your First App tutorial: Create a Next.js App Navigate Between Pages Assets, Metadata, and CSS NOTE: If you plan on completing the full stack challenge, we recommend you complete the each step Next.js Create Your First App tutorial	Challenge 1 100 Points In order to complete the backend challenge, you must have SQL Server Management Studio downloaded. Establish a simple database system from an assigned system with primary table/object and can populate table with the given parks.json Use the parks.json file within the repo & convert it to a SQL Server table Provide a primary key for your data, assuring that it will increment anytime new data enters Display primary data. Use SELECT queries to prove you can access the data You may change or add new data as you please. However, please have at least 5 columns (not including the id)
Challenge 2 100 Points Utilizing the National Park data stored in parks.json, iterate through the national park data to create a National Park landing page. Use Bootstrap as a frontend component library The landing page must have a navigation bar with a home button. Additionally, the landing page must include each park's key data components: Full name of the National Park National Park Description Latitude + Longitude An image referenced from the provided URL A hyperlink to open a new window for further park information	Challenge 2 100 Points Establish a connection (primary controller) for an initial database connection (we recommend Spring Boot. Create a series of GET calls from database: GET all data from database GET specific queried data from database - by ID GET specific queried data from database - by column Use screenshots of Postman responses to prove your functionality Requires: DAO Layer (for repositories) Service Layer Controller Layer (Use provided folders to create needed files - not including DTOs) NOTE: Try to use Spring Boot's built-in methods to complete the mapping. You likely will not need to create custom SQL queries.
Challenge 3 100 Points Transform the existing landing page into a simple list of the National Parks names. Ultimately, when the user clicks on it a park name, it will lead the user to a new park-specific page. You must include all of the static components from Step Two of the frontend challenge (name, description, etc.) in each individual page. Additionally, you will use the React function useState to create the following interactive components for the user: A star icon to favorite a park. If the user clicks on a star icon, then the icon change format to indicate that it is favorited A badge that indicates the type of park (National Park, Historical Trail, etc.) A search feature located in the navigation bar based on park name A description on whether the park is in northern or southern California HINT: Think about creating reusable components. Is it better to use Next.js pages, props, or both? What identifier can you utilize in the parks.json file to ensure that each component has its own key? You as the developer must decide.	Challenge 3 100 Points Having completed the GET mapping, now it's time to finish your POST, PUT, and DELETE mappings. Establish full API calls to the database with CRUD behavior (In Spring Boot, they're labeled as @GetMapping, @PostMapping, @PutMapping, and @DeleteMapping) CRUD call types (when applicable): CRUD specific queried data from database - by ID CRUD specific queried data from database - by column Certain programming languages have different approaches when building these out (JPA Repository in Java, EF Core in C#), so try to follow their conventions Use Provided folders to created needed files (not including DTOs) Use screenshots of Postman responses to prove your functionality NOTE: Try to use Spring Boot's built-in methods to complete the mapping. You likely will not need to create custom SQL queries.
Challenge 4 100 Points Now, utilize the activities.json file create components based on the activities each park provides. On the park-specific pages, you will need: An interactive map feature based on latitude and longitude A list of activities associated with the given park (NOTE: need to talk to Nathan about adding an activities.json file) Search functionality based on any data point associated with a particular park (you decide: name, activity, etc.) Any other components you think would be useful to the user utilizing both the parks.json and activities.json file. Have fun here! Make it what you want.	Challenge 4 100 Points Expand your database by implementing relationships between tables and can make proper CRUD calls to to new entities. New table creation is encouraged to be based off of user interactivity. Think about how you would store data for specific users Create new table/storage for the relational database: Activities.json Parks_Activities.json (relationship table, many-to-many) CRUD all new data from database CRUD specific queried data from database - by ID CRUD specific queried data from database - by column Keep in mind... Make modifications to your current code when needed Use Provided folders to created needed files (not including DTOs) Use screenshots of Postman responses to prove your functionality NOTE: For complex database calls, you may have to create custom SQL queries within your repos. However, challenge yourself by using Spring Boot's built-in methods to complete your mappings until its needed
Challenge 5 100 Points Finally, you will ensure that your National Park app functions as expected and is accessible by all users. You must: Select a testing library associated with Next.js and test your application. Receive an accessibility score of at least 90% with Google Lighthous	Challenge 5 100 Points Establish a DTO (data transfer object) layer and modify our current mappings to return DTO types. Implement a DTO layer into your application and can make complex/unique CRUD calls to your database. Create DTOs for all entities (DTO folder is provided) Update services & controllers to return DTOs Establish complex mappings that lean on their new relationships between tables in the database Use Provided folders to created needed files (not including DTOs) Use screenshots of Postman responses to prove your functionality

Resources

Fundamentals:

• Learn HTML, CSS, and JavaScript in 30 minutes
• Java in 100 Seconds
• Spring Boot in 2 hours

Frontend:

• React
• Next.js
• Bootstrap

Back-End

• SQL Server Management Studio
• Spring Boot
• Postman

Who is Avanade?

Avanade is the leading provider of innovative digital, cloud and advisory services, industry solutions and design-led experiences across the Microsoft ecosystem.