CoCs is a cloned React web application inspired by the idea of the famouse mobile game Class of Clans in Finland. With the help of create´react-app, ReactJs provides a ready-built template to implement coding on top of it, so we do not have to configure Babel and Webpack by ourselves. Also, the advantage of ReactJs lies in the power of taking care our virtual DOM, in which we do not have to contact with the DOM manually as Vanilla Javascript.
Core philosophy of React is composing applications from many specialised reusable components.
In this project, besides HTML, CSS and Javascript, ReactJs, a Javascript library is used to build and advance user interfaces based on divided UI components. TypeScript, a superset of Javascript is implemented to allow us to detect errors early and avoid some runtime erros. Additionally, Progressive Web Application is applied to help us measuring the quality of the web app.
The following content will be covered in this README.md:
- Learning Objectives
- Requirements
- Installation & Usage
- Author
- References & Helpful Links
- Contributing
- License
After fulfilling the project, I acquire knowledge to:
- Build and style somewhat dynamic webpages with semantic HTML and CSS and Javascript with ReactJs library on top
- Implement best practices and standards when structuring HTML files using nested elements, indentation, comments, and line breaks
- Implement the use of ReactJs for DOM manipulation and minify the files of our project with the help of Webpack from
create-react-app - Implement the use of Material UI and styled-component and Google font, to advance the styling of the project and implement Google's Material Design concept
- Implement CSS styling via class, id and element selectors using external stylesheets and inline/nesting styles to make 3D effect for characters
- Implement the use of
.jsxextension to build reuseable component for user interfact, along withReact hooks - Implement the use of Fetch API, along with
async/awaitto retrieve data fromJSONfile - Implement the use of TypeScript to detec erros of types during development
- Perform common commands via the command line to interface with the operating system, such as navigating the file tree and creating, opening and comitting the file and directory to github
- Use Git workflow to initialize projects, track changes, and host via remote server
- Execute live deployment using GitHub Pages
Build a web application that demonstrating the use of TypeScript in create-react-app and apply service-worker to measure the quality of the project