Fullstack Web Development Project with APi | Design, Implementation, and Integration | Thinkswithyou
ping me on WhatsApp if you need help +92 343 9293686
● Implement your understanding of web application architecture in your web project.
● Study the different scenario of the project to come up with inclusive wireframe design
(structure of the website)
● Prepare a prototype design of your web application.
● Implementation should be done using react.js and related packages.
● Adhere to formal project work file structure and good naming convention.
● Store all course and students related data using array or object.
1. Wireframe design
2. Frontend Design Process
As in any large software project, you should take some time to consider your front-end
design before starting the implementation. Consider the following questions while coming
up with your design:
1. What are my different pages?
a. Which parts of these pages should be components?
b. Which parts of these pages should be elements?
c. Where and how should I store my state? Which elements can be stateless?
d. How should the state be transferred between components and elements?
2. How can my frontend use an API to access data from a database?
3. Which portions of my design are reusable?
4. How should I handle state changes?
5. Is my design modular?
a. Does this design exhibit low coupling and high cohesion?
6. Is my design easily updatable or customizable?
Implementation
Implementing Your project
Remember to keep the following in mind as you write and test your code:
1. Does this code adhere to the design?
a. If not, is that an implementation oversight or a design oversight?
2. Is this code maintainable?
a. Does it detect and handle strange input parameters?
b. Does it correctly leverage the framework I am using?
c. Does it use proper packages and tools?
3. Is this code efficient?
a. If not, is it worth the cost in time and readability to fix that?
4. At this point you can recode the front end as well as the back end to meet any specific
need
5. Much like your frontend, you should think carefully about your design before you start
implementing any code. Consult your sketch and consider the back and front end to sync
each other.
4
What to submit for A1
You are expected to make progress on your site throughout the semester. You must meet the
following conditions as part of A1 submission:
1. Project file zipped and uploaded on D2L A1 dropbox (10-to-15-minute demonstration
video recording)
2. Must be capable of running on a local machine.
3. It should have full functionality of react based UI and user interaction feature.
4. Each student must demonstrate the submission if requested.
Assignment 2:
Assignment expectation
● Prepare the backend design of your website. Make sure it aligns to what you built on A1.
● Implement backend web server using Node.Js and SQL/MySQL or MongoDB server, .JSON
file etc as data storage.
● Create different local APIs to process data from your database.
● Discuss your ERD diagram or file structure to make sure the schema accommodates the
features of your front-end website. You should be able to run, connect to, and query your
dataset/database and populate the database with sample record/update the dataset.
● Which API should you implement to retrieve information to/from the Bow course
registration system?
Assignment2 Requirements
In this part of the assignment2, you should work on
1. Working database schema implementation populated with sample data or structured
dataset source.
2. Working web server setup
3. Backend web application and database/dataset integration
4. Local APIs to fetch data to/from your database/dataset (you can use postman for testing)
5. Security and validity feature
6. Login or session management
5
What to submit for A2
Consider the following to submit as A2 file
1. Node.js project file zipped and uploaded on D2L A2 dropbox (10-to-15-minute
demonstration video recording)
2. Must be capable of running on a local machine.
3. It should have full functionality of fetching data from your data storage, validation, and
certain level of security implementation by the time this assignment is due.
4. Each student must demonstrate the submission if requested.
Final Project
Front End and Back End integration (35 points)
Implementation
In this final project phase, you are expected to integrate your front-end work from A1 with your
A2 backend project. Then instead of using postman or backend html page to utilize your
backend data storage and API you will use your react UI.
Much like your frontend, you should think carefully about your design before you start
implementing any code. Consult your sketch and consider the following questions:
1. Which API should get information to/from Bow registration system?
2. Proper use and implementation of APIs to work on Bow registration system UI.
3. What is the input and output of any functions I need? Are there edge cases?
1. How should I structure my end points?
2. How will I manage login and sessions?
4. Is my design modular?
Watch video Fullstack Web Development Project with APi | Design, Implementation, and Integration | Thinkswithyou online without registration, duration hours minute second in high quality. This video was added by user Thinkswithyou 19 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2 once and liked it people.