萌萌二次元导航网站完整开源项目

最新推荐文章于 2024-11-05 12:00:00 发布

Stone.Wu

最新推荐文章于 2024-11-05 12:00:00 发布

阅读量1.6k

点赞数 14

本文链接：https://blog.csdn.net/weixin_42400643/article/details/142744003

版权

本文还有配套的精品资源，点击获取

简介：本文介绍了一个名为“萌萌的二次元网址导航网”的开源项目，涵盖了前端开发技术、可能的后端技术、数据库交互和服务器配置等知识。项目通过开放源代码为开发者提供了学习网页设计与开发的平台。开发者可以从源代码中学到实际的编程技能，理解软件工程的最佳实践，并参与社区交流，提升自身的协作和沟通能力。二次元

1. 二次元网站导航项目介绍

1.1 项目的起源与发展

随着二次元文化的日益普及，越来越多的爱好者开始寻求一个集中且便于浏览的网站导航平台，以方便追踪最新作品、讨论交流及获取相关资讯。我们的二次元网站导航项目应运而生，旨在为全球的二次元爱好者提供一个多功能、高效率、易用性强大的导航服务。项目自启动以来，经过多个版本的迭代和改进，现已能够支持个性化内容推送，并根据用户的浏览习惯和偏好，提供定制化服务。

1.2 项目的目标与意义

项目的目标是打造一个集二次元资讯、社区交流、作品检索等多功能于一体的导航平台。它不仅为用户提供了便捷的入口，也为内容创作者和社区运营者提供了展示的舞台。从更深远的意义上来说，这个项目有助于推动二次元文化的发展，为全球爱好者打造一个交流的桥梁，促进不同文化背景下的理解和交流。

1.3 项目的主要功能与特色

本项目的主要功能包括：

个性化的网站导航 ：根据用户的行为数据和偏好设置，推荐最符合其兴趣的网站。
内容聚合 ：集中展示热门动漫、游戏、轻小说等相关资讯，使用户能够一站式获取最新动态。
社区交流平台 ：集成论坛、评论区、用户互动等元素，增强用户之间的互动和分享。
作品检索与推荐系统 ：通过先进的算法，为用户推荐他们可能感兴趣的作品。

这些特色功能的实现，不仅提升了用户体验，也使二次元网站导航项目成为该领域的一个领跑者。

2. 开源项目学习平台

2.1 开源项目的意义与价值

2.1.1 开源精神的内涵

开源精神不仅仅在于代码的共享，更在于知识和创新的共享。它鼓励开发者公开自己的代码，允许其他人使用、学习、修改甚至重新分发。开源项目由全球社区共同开发，项目参与者能够得到以下几个方面的提升：

透明性 ：代码的开源使得任何人都可以审查和改进，从而提高软件的整体质量和安全性。
创新性 ：更多的目光和思维的碰撞往往能产生新的创意和解决方案。
合作性 ：开源项目往往跨越地域限制，通过互联网连接来自世界各地的开发者。
学习性 ：新手开发者可以参考成熟的项目进行学习和实践，快速提升技术水平。

2.1.2 开源项目对个人成长的帮助

成为开源项目的一份子，对个人成长具有多方面积极影响：

技术提升 ：通过阅读和理解项目代码，可以学习到最佳实践和先进的技术。
社区互动 ：参与讨论和贡献代码可以提高沟通能力，同时也会遇到各种不同的问题和挑战，有助于增强解决问题的能力。
职业发展 ：许多公司倾向于雇佣在开源项目中有贡献的开发者，因为这代表了热情、技能和团队合作精神。
品牌建设 ：个人在开源社区的活动和贡献可以建立个人品牌，提升专业影响力。

2.2 如何有效利用开源项目进行学习

2.2.1 挑选合适项目的原则

选择合适的开源项目对于学习至关重要。以下是一些挑选项目的原则：

项目活跃度 ：优先考虑活跃的项目，活跃的项目意味着更频繁的更新和更多的社区支持。
文档完整性 ：良好的文档可以帮助更快地理解和学习项目。
技术栈熟悉度 ：选择与个人技术栈相关的项目，可以更有效地学习和贡献。
社区友好度 ：一些项目有非常友好的新手入门指南，这可以帮助新手快速上手。

2.2.2 跟踪项目进度与社区交流

一旦选定项目，以下步骤可以帮助你有效跟踪项目进度和与社区进行交流：

定期更新 ：通过设置项目仓库的watch或star，你可以收到项目的最新动态通知。
阅读文档 ：定期阅读项目的文档和更新日志，了解项目进展。
参与讨论 ：在项目的issue和讨论区积极参与讨论，提出问题和建议。
贡献代码 ：通过提交pull request来贡献自己的代码，这是最直接的参与方式。

# 示例：如何为一个开源项目贡献代码

1. **Fork项目**：在GitHub上fork原项目的仓库到自己的账号下。
2. **克隆仓库**：使用`git clone`将仓库克隆到本地开发环境。
   ```
   git clone ***
   ```
3. **创建新分支**：在本地仓库中创建一个新分支进行开发。
   ```
   git checkout -b new-feature
   ```
4. **修改代码**：在新分支上进行代码修改或添加新的功能。
5. **提交更改**：使用`git add`添加更改，`git commit`提交更改。
   ```
   git add .
   git commit -m "Add new feature"
   ```
6. **推送分支**：将更改推送到自己的GitHub仓库。
   ```
   git push origin new-feature
   ```
7. **提交Pull Request**：在GitHub上提交Pull Request到原项目仓库。
8. **等待反馈**：项目维护者或社区成员会对你的PR进行审查，并提供反馈。

代码审查 ：不要害怕代码审查。积极地响应和应用反馈可以提升代码质量。

通过上面的介绍，我们了解了开源项目学习平台的意义与价值，并且掌握了一些挑选和参与开源项目的方法。下一节我们将继续探讨前端开发的基础知识，为我们在网站导航项目中的实践打下坚实的基础。

3. 前端开发技术

在当今的Web开发领域，前端技术是构建用户界面的关键部分，其作用举足轻重。从静态页面到富交互式应用，前端技术都扮演着不可或缺的角色。本章节将深入探讨前端开发的基础知识和实战技巧，旨在为读者提供一个全面而深入的理解。

3.1 HTML、CSS和JavaScript基础知识

3.1.1 HTML的基本结构与标签使用

HTML（超文本标记语言）是构建Web内容的基础。它通过定义文档的结构和内容，告诉浏览器如何显示页面。以下是一个简单的HTML文档结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

在上述代码中， <!DOCTYPE html> 声明了文档类型和HTML版本。 <html> 标签是所有HTML页面的根元素。 <head> 包含了文档的元数据，如 <title> 定义了页面标题。 <body> 包含了可见的页面内容， <h1> 是一个一级标题， <p> 表示一个段落。

HTML标签具有不同的功能和语义，学习它们是构建结构化和可访问性页面的基石。例如，用于导航的 <nav> 标签、定义文章内容的 <article> 标签等，有助于更好地组织页面内容，并提供给搜索引擎和辅助技术更好的理解。

3.1.2 CSS样式表的编写与优化

CSS（层叠样式表）用于设置HTML元素的布局、颜色、字体等样式属性。CSS极大地增强了页面的视觉效果和用户体验。下面是一个简单的CSS样式规则示例：

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: #333333;
    font-size: 2em;
}

在该示例中， body 选择器设置了页面的标准字体， h1 选择器则将一级标题的字体颜色和大小进行了定义。通过合理使用CSS，可以显著提高页面的美观性和用户友好性。

CSS的优化包括精简代码、减少HTTP请求、避免使用内联样式以及采用语义化的类名等。另外，利用CSS预处理器如SASS或LESS，可以进一步优化样式代码的结构和可维护性。

3.1.3 JavaScript基础语法及DOM操作

JavaScript是一种动态编程语言，使得网页可以进行交互式操作。它通过操作文档对象模型（DOM）来改变页面的结构、样式和内容。下面是一个简单的JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
    var heading = document.querySelector('h1');
    heading.textContent = 'New Heading';
});

在这个例子中，使用了 document.addEventListener 监听DOM内容加载完成事件。一旦文档加载完成， document.querySelector 选取页面中的第一个 <h1> 元素，并通过修改 textContent 属性来改变其显示的文本。

JavaScript还包括事件处理、函数、对象和异步编程等概念。学习这些基础知识是编写有效和高效的前端代码的关键。

3.2 前端开发实战技巧

3.2.1 响应式网页设计与媒体查询

随着移动设备的普及，响应式网页设计变得越来越重要。它确保网页能在不同的屏幕尺寸和设备上提供良好的浏览体验。CSS中的媒体查询是实现响应式设计的核心技术之一。下面是一个使用媒体查询改变样式以适应不同屏幕宽度的示例：

/* 默认样式 */
body {
    background-color: lightblue;
}

/* 当屏幕宽度小于或等于480px时 */
@media only screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

在这个例子中，当屏幕宽度小于或等于480px时， body 的背景色将从浅蓝色变为浅绿色。使用媒体查询，可以为不同屏幕尺寸定义一套或多套CSS规则。

3.2.2 前端性能优化与兼容性处理

前端性能优化主要包含减少文件大小、压缩资源、使用CDN等。兼容性处理则涉及使用CSS前缀、polyfills、feature检测等技术，确保页面在不同浏览器上都能正常工作。

<!DOCTYPE html>
<html>
<head>
    <title>Optimized Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="scripts.js"></script>
</body>
</html>

在上述代码中，通过将CSS文件放在 <head> 内而JavaScript文件放在 </body> 前，可以优化页面渲染速度，减少阻塞渲染的影响。通过使用自动化工具（如Webpack、Gulp等）可以进一步压缩和优化资源文件。

通过使用现代前端框架和库（如React、Vue、Angular等），可以进一步提升开发效率和性能。这些工具通常会提供内置的优化策略，比如虚拟DOM、组件化开发、代码分割等。

前端技术在不断进步，随着浏览器标准化进程的推进，兼容性问题已经大幅度减少。但仍然需要对一些老旧的浏览器进行适配，确保网站的用户覆盖。

总结而言，前端开发基础知识是构建现代Web应用的基石，而实战技巧则是让应用具备良好用户体验的关键。通过深入学习HTML、CSS和JavaScript的基础知识以及掌握前端开发的实战技巧，开发者可以创造出既美观又实用的Web应用。

4. 后端技术可能性

4.1 语言选择与框架理解

4.1.1 PHP基础与高级特性

PHP是一种广泛使用的开源服务器端脚本语言，特别适合于Web开发。它以其简单性和易用性而闻名，是许多初学者首选的后端语言之一。此外，PHP在企业级Web应用开发中，也有着广泛的应用基础。

从基础开始，PHP脚本可以嵌入HTML标签中，便于动态生成内容。它支持多种数据库，如MySQL、PostgreSQL等，且拥有丰富的函数库。随着版本的升级，PHP也逐渐加强了对现代Web开发技术的支持，例如命名空间、匿名函数、反射等高级特性。

<?php
// PHP 基础语法示例
$greeting = "Hello, World!";
echo $greeting;

在上述代码块中，我们创建了一个简单的PHP程序，它将字符串 "Hello, World!" 输出到浏览器。这是PHP基础语法的示例，显示了PHP如何简单快速地生成Web内容。

高级特性方面，PHP7 引入了标量类型声明和返回类型声明，极大地提升了代码的严谨性和性能。对于大型应用开发，PHP7带来了更好的性能优化，包括对匿名类和null合并运算符的支持。

<?php
function sum($a, $b) : int {
    return $a + $b;
}

echo sum(2, 3); // 输出 5

在上面的例子中，函数 sum 被声明为返回一个整型值。这是PHP7中引入的返回类型声明特性。

为了更好地理解PHP的高级特性，开发者可以使用如下命令安装PHP7：

sudo apt-get update
sudo apt-get install php7.4

安装完成后，可以通过命令 php -v 检查PHP版本。了解并掌握PHP的高级特性，是后端开发工程师技术进阶的必经之路。

4.1.2 Node.js的异步编程模型

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript编写高效的服务器端应用程序。Node.js的核心特点之一是事件驱动，非阻塞I/O模型，这使得Node.js特别适合处理大量并发连接，尤其是在IO密集型的应用中表现出色。

Node.js的异步编程模型主要依赖于回调函数、Promises和async/await来管理异步操作。

const fs = require('fs');

fs.readFile('/path/to/file', (err, data) => {
    if (err) throw err;
    console.log(data);
});

在上述代码块中，我们使用 fs.readFile 读取一个文件，这是一个典型的异步操作。Node.js通过回调函数在操作完成时返回结果，这避免了阻塞主线程。

const fs = require('fs').promises;

async function readFileAsync(path) {
    try {
        const data = await fs.readFile(path);
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

readFileAsync('/path/to/file');

在Node.js的后续版本中，我们还可以使用async/await来处理异步操作。这使得异步代码的可读性和可维护性与同步代码更加接近。

使用Node.js进行开发前，首先需要确保已经安装了Node.js环境。可以通过以下命令来安装Node.js：

curl -sL ***

安装完成后，运行 node -v 可以验证安装是否成功，并查看Node.js的版本号。

4.1.3 Python在Web开发中的应用

Python是一种高级编程语言，以其可读性强、语法简洁和丰富的库支持而受到开发者的青睐。在Web开发领域，Python同样有着广泛的应用，尤其是Django和Flask两个Web框架，它们为Python提供了简单而强大的Web开发能力。

Django是一个开源的Web应用框架，遵循MVC架构模式，它自带有大量预构建的功能，可以快速开发复杂的、数据库驱动的网站。Django的“约定优于配置”原则也使其成为初学者友好的框架。

from django.http import HttpResponse

def hello_world(request):
    return HttpResponse("Hello, world. You're at the polls index.")

在上面的代码片段中，我们定义了一个简单的Django视图函数，返回了基本的响应。

Flask是一个用Python编写的轻量级Web应用框架。它设计轻巧灵活，非常适合作为微服务的起点。Flask的哲学是“最小的必要部分”，提供了快速开发原型的简易途径。

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

上述代码创建了一个基本的Flask应用，并定义了一个路由，当用户访问根目录时，返回"Hello, World!"。

在开始使用Python进行Web开发之前，首先需要安装Python环境：

sudo apt-get update
sudo apt-get install python3 python3-pip

安装完成后，可以通过运行 python3 --version 来检查Python版本。要安装Django或Flask，可以使用pip包管理器：

pip3 install django
pip3 install flask

这样，你就可以开始使用Python进行Web开发了。

5. 数据库交互

数据库是任何Web应用的核心组成部分，负责存储、管理和检索数据。在这一章节，我们将深入探讨关系型数据库MySQL和非关系型数据库MongoDB的使用。了解这两类数据库的区别，及其在不同应用场景下的优劣，对于开发人员来说至关重要。

5.1 关系型数据库MySQL的使用

5.1.1 MySQL数据库的安装与配置

MySQL是当前流行的开源关系型数据库管理系统之一，广泛应用于各种Web应用中。要使用MySQL数据库，首先需要完成其安装和配置。以下是安装MySQL的基本步骤：

下载并安装MySQL服务器。用户可以根据操作系统的不同选择合适的安装包。例如，在Linux环境下，可以使用包管理器进行安装，如在Ubuntu系统中使用命令： sudo apt-get update sudo apt-get install mysql-server
完成安装后，运行安全安装脚本来设置root密码、删除匿名用户、禁止root远程登录等。确保数据库的安全性是至关重要的一步。
进行基本配置，包括设置字符集和时区等，这些可以通过修改MySQL配置文件 ***f 或 my.ini 来实现。
启动MySQL服务，并通过命令行或图形界面管理工具连接到MySQL服务器，以确认安装与配置无误。

5.1.2 SQL语言的基础与进阶应用

SQL（Structured Query Language）是操作关系型数据库的标准语言。掌握SQL是使用MySQL的基础。

基础查询 ：了解如何使用 SELECT 语句进行数据查询，使用 WHERE 子句进行条件筛选，使用 ORDER BY 进行排序，以及使用 JOIN 进行表连接。
数据修改 ：学习如何使用 INSERT 语句添加新数据， UPDATE 语句更新数据，以及 DELETE 语句删除数据。
进阶操作 ：掌握事务管理，学习如何使用 COMMIT 和 ROLLBACK 来控制事务，以及使用索引来优化查询效率。

5.1.3 数据库优化与备份策略

随着数据量的增长，数据库的性能优化变得尤为重要。以下是一些常见的优化策略：

索引优化 ：创建合适的索引可以大大提高查询效率。应避免过多不必要的索引，因为这会降低数据写入的速度。
查询优化 ：优化SQL查询语句，避免使用复杂的子查询，合理使用连接（ JOIN ），减少数据的传输量。
结构优化 ：数据库表结构的设计应遵循第三范式，尽量避免冗余数据，合理地使用分区来分散存储和查询的压力。

备份是数据库管理中不可忽视的一环。定期备份数据可以防止数据丢失，常见的备份方法有：

逻辑备份 ：使用 mysqldump 工具导出数据库为SQL脚本文件。
物理备份 ：直接复制数据库文件，或使用如 xtrabackup 这样的工具进行热备份。
在线备份 ：利用MySQL的复制功能，将数据实时复制到另一台服务器上。

5.2 非关系型数据库MongoDB的探索

MongoDB是当下最流行的NoSQL数据库之一，它以高性能、高可用性和易扩展性而被广泛使用。在本小节中，我们将探索MongoDB的特点、数据交互优化以及高级特性。

5.2.1 MongoDB的特点与优势

MongoDB的特点主要体现在其灵活的数据模型、水平扩展能力以及丰富的查询语言上。

灵活的数据模型 ：MongoDB使用BSON（类似JSON）格式存储数据，支持动态模式，这意味着即使数据库结构发生变化，也无需进行繁琐的迁移工作。
水平扩展能力 ：MongoDB支持分片（sharding）架构，数据可以在多个服务器间自动分配，实现负载均衡和高可用。
强大的查询语言 ：MongoDB提供了强大的查询语言，支持全文搜索、地理空间查询、聚合操作等复杂查询。

5.2.2 数据存储与查询优化

MongoDB在存储和查询上的优化涉及到数据模型设计、索引的合理应用以及查询计划分析等方面。

数据模型设计 ：合理设计数据模型可以减少数据冗余，提高查询效率。例如，使用嵌入式文档可以减少查询中的连接操作。
索引应用 ：创建索引是优化查询的关键，但索引也会占用额外空间并影响写入性能。合理选择索引字段和类型（如单键索引、复合索引）是优化的重点。
查询计划分析 ：通过执行 explain 命令可以查看查询计划，分析查询执行的细节，找出潜在的性能瓶颈。

5.2.3 高级特性：聚合框架的应用

MongoDB的聚合框架是一个强大的工具，它允许用户通过一系列操作来处理数据，这包括筛选、分组、排序以及格式化等。

聚合管道 ：聚合操作由一系列阶段组成，每个阶段将文档转换为某种形式。常用的阶段包括 $match 用于筛选文档、 $group 用于分组、 $sort 用于排序等。
复杂数据处理 ：使用聚合框架可以执行复杂的查询，如对数据进行分组统计、多条件筛选等。
性能优化 ：聚合操作可能会消耗大量资源，特别是在处理大规模数据集时。优化聚合操作的一个重要方面是使用索引，并合理利用不同的聚合阶段。

db.sales.aggregate([
    { $match: { status: "A" } },
    { $group: {
        _id: "$cust_id",
        total: { $sum: "$amount" },
        average: { $avg: "$amount" }
    }}
]);

以上代码展示了一个聚合操作的例子，其中 $match 用于筛选出状态为"A"的销售文档，然后通过 $group 对客户ID进行分组，并计算每个客户的总销售额和平均销售额。

总结

数据库是Web开发中不可或缺的组成部分。掌握MySQL和MongoDB的使用，不仅意味着能够处理结构化和半结构化的数据，还意味着能够优化数据库性能，实现数据的高效存储与检索。随着技术的进步，数据库领域不断有新的技术出现，但无论技术如何演进，对数据库核心概念的理解和应用都是开发人员必备的技能。在后续章节中，我们将继续探索服务器配置、项目实践以及协作能力的提升，从而为成为一名全面的Web开发者奠定坚实的基础。

6. 服务器配置学习

服务器是互联网运作的基础设施，为网站、应用提供计算资源和数据存储服务。通过本章节，我们将深入了解服务器的基础概念、Linux系统的入门知识、服务器的安全防护措施以及监控技巧。

6.1 服务器基础概念与Linux系统入门

6.1.1 服务器的作用与类型

服务器是计算机网络中为其他计算机（称为客户端）提供特定服务的高性能计算机。在互联网中，服务器可以处理来自客户端的请求，例如提供网页浏览、文件存储、数据库管理等服务。服务器的类型多种多样，包括但不限于以下几种：

Web服务器：专门用来托管网站，处理HTTP请求。
文件服务器：管理文件存储和共享。
应用服务器：运行应用程序，如数据库、邮件服务等。
数据库服务器：专门用于存储和管理数据库。
游戏服务器：为在线游戏提供数据处理。

6.1.2 Linux操作系统的基本使用

Linux是一种开源的操作系统，广泛应用于服务器领域。它的主要优点包括稳定性高、安全性强、易于定制和使用成本低。以下是Linux系统的一些基本命令和使用方法：

# 更新系统软件包
sudo apt update && sudo apt upgrade -y

# 查看当前目录下的文件
ls -l

# 创建文件夹
mkdir myfolder

# 复制文件
cp sourcefile targetfile

# 移动或重命名文件
mv oldname newname

# 查看系统状态
top

# 查看内存使用情况
free -m

# 查看网络接口状态
ifconfig

Linux系统中的 sudo 命令允许用户以超级用户权限执行命令， apt 是Debian及其衍生系统的包管理器。 ls 、 mkdir 、 cp 、 mv 等是常见的文件管理命令，而 top 、 free 、 ifconfig 是系统监控和网络配置的常用工具。

6.2 服务器安全与监控

6.2.1 常见的安全威胁与防护措施

服务器面临的安全威胁有很多，如病毒、黑客攻击、系统漏洞、数据泄露等。防护措施包括：

配置防火墙：限制对服务器的访问，阻止未经授权的入侵。
定期更新系统和应用：保证系统安全补丁及时应用。
使用强密码策略：设置复杂的密码，定期更换。
数据备份：定期备份数据，以防数据丢失。
仅开启必要的服务：减少潜在的攻击面。

6.2.2 服务器状态监控与日志分析

服务器监控是确保服务器稳定运行的关键，常见的监控工具和方法包括：

CPU、内存、磁盘和网络的使用率监控。
应用程序日志分析，如Apache、Nginx、MySQL等。
系统日志，记录用户登录、系统错误等信息。
使用监控工具如Nagios、Zabbix进行实时监控。

graph LR
A[服务器状态] --> B[CPU使用率]
A --> C[内存使用率]
A --> D[磁盘I/O]
A --> E[网络流量]
B --> F[防火墙配置]
C --> G[内存监控工具]
D --> H[磁盘监控工具]
E --> I[网络监控工具]

上面的Mermaid流程图展示了服务器状态监控的各个方面和相应的监控工具。通过这样的图形化方法，我们可以直观地理解监控系统中各个组件的作用和它们之间的关系。

在本章节中，我们学习了服务器的基础概念、Linux系统的基本使用，以及如何保障服务器的安全和监控服务器的状态。这些知识对于维护一个高效、安全的服务器环境至关重要。下一章节，我们将聚焦于项目实践和协作能力的提升。

7. 项目实践与协作能力

7.1 项目目录结构与管理

7.1.1 合理组织项目文件的重要性

一个清晰的项目目录结构能够为项目团队成员提供直观的文件组织方式，提高团队协作的效率。它不仅有助于新成员快速理解项目架构，还能确保项目文件在不同环境下的一致性和可维护性。良好的目录结构应遵循以下原则：

模块化 ：将项目分解成多个模块，每个模块负责一部分功能。
命名规范 ：使用语义化且具有描述性的文件名和目录名。
一致性 ：保持整个项目的命名和目录结构风格一致。

例如，对于一个Web项目，通常的目录结构可能如下：

project-name/
├── node_modules/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.js
│   ├── index.js
├── tests/
├── package.json
├── .gitignore
├── README.md
└── ...