<Overview>
This blog is about our First Front-End-Project(Clickers) which we built at Masai School. The project was built by me and my Team-mate (Naga Sowmya Narayanan) on **React — Redux**. In US, there is a system called Classroom responsive system(CRS) where teacher can host a poll and students can respond to it based on their understanding of the session conducted by the teacher but they have to respond to it by using Clickers device(Remote control device). This is more expensive, so we created this product based on the guidance of our Masai School faculty. So it is an on-line polling system where **Teacher** can raise a query and **Students** can submit their response based on the options that teacher will provide.
</Overview>
<Road map to Success>
As written above, we started with a very detailed planning. We began with making the **Data Flow Diagrams(DFD)** so that we can understand what to do next and how to make a basic design for the project.
As we started with the Data Flow Diagrams it helped us understand the complete structure and how we need to proceed further to design templates in a way so that it should be more interactive to the user. Then after getting an idea of flow we started designing the templates. We used **FIGMA** to design the templates which helped us a lot in making the real user experience for the user to interact with our project.
</Road map to Success>
<Coding>
Our project was based on ReactJs and Redux. For the Back-end of our project, we used Fire-base(Real-Time Database). We also used the Chart.Js library(for Charts) which helped us show the responses submitted by the students with a graphical representation. We used Cascading Style Sheets(CSS), Material-UI and Bootstrap.
Day-1 We worked on the User Interface(UI)
Landing page which acts as the main page and it should be user-friendly so that user can understand about our website and some information how our polling works so that it will be less time consuming for the user.
Teacher Registration Page which will be the most important page for the website because the new Teacher can register and will start using the website as the poll maker.
Student Registration Page is the important page for the website because the new Student will register and will start using the website as participating in the poll.
Day-2 We started working on login page if the user has been registered and he/she will wants to login. Once the user is logged in they can be redirected to their respective dashboards from the login page by entering the correct credentials. All the data till now is stored in the redux store and then to local storage so that we could check whether the data is stored in a correct format or not.
Day-3 We started working on implementing the redux part so as to test whether the data is flowing correctly and all the data is filled in the following pattern we structured it. We made a reducer.js file which acted as a Reducer for the redux part and actions.js which acted as an Action for the redux part which decides the action performed to the reducer by setting up an action type.
Day-4 We implemented the Teacher dashboard and Student Dashboard page which is the main page for the teacher to create poll and to set the options for that poll and for student to participate in that poll by responding to any of those four options. Teacher after clicking on Create poll Button, the text-field for the question and four options will be visible, after filling up the respective boxes and on clicking the submit button the link is generated. The link then will be shared to his/her students. Students then will paste the link on their dashboard and after clicking on the View button, they will be able to see the poll and also respond to it. All the data till now is being stored in the redux store. Teacher, after all the students responded to the poll will be able to see a Bar graph type chart to see the outcome of the poll.
Teacher Dashboard
Student Dashboard
Day-5 We started making the Response page or the page where Teacher can view the response submitted by the Students for a particular poll. We made this page with the help of Chart.js.
</Coding>
Completion
It was a great achievement for us to complete our first front-end project. It gave me an experience to work in a team and working on the real problem and making a solution for it. Thanks to Masai School for setting up great learning environment.
